前端專案結構有多少種類型？

建立前端專案對於開發健壯且易於維護的應用程式非常重要。良好的結構使程式碼易於理解。而且可以高效的擴充功能尤其是使用時開發中的 Next.js 和 TypeScript 以下是幾種常用的專案結構：

1. 基本結構

my-next-app/
├── public/              # Static files like images, fonts, etc.
├── src/                 # Source code
│   ├── components/      # Reusable components
│   ├── pages/           # Page components (Next.js routing)
│   ├── styles/          # CSS/SASS files
│   ├── hooks/           # Custom hooks
│   ├── contexts/        # Context API providers
│   ├── utils/           # Utility functions
│   ├── types/           # TypeScript types/interfaces
│   ├── services/        # API calls or services
│   ├── lib/             # Any additional libraries or helpers
│   └── config/          # Configuration files
├── .gitignore           # Git ignore file
├── next.config.js       # Next.js configuration
├── package.json         # npm/yarn package file
└── tsconfig.json        # TypeScript configuration

2. 原子設計結構

原子設計是一種UI設計概念，強調根據大小和功能分離組件。可分為5層次：原子、分子、有機體、模板和頁面

my-next-app/
├── public/                 # Static files
├── src/
│   ├── components/         # UI components
│   │   ├── atoms/          # Smallest elements like buttons, inputs
│   │   ├── molecules/      # Combinations of atoms (e.g., form groups)
│   │   ├── organisms/      # Complex UI components (e.g., header, footer)
│   │   ├── templates/      # Page templates with placeholders
│   │   └── pages/          # Page components
│   ├── pages/              # Next.js routing (can be left for dynamic routing)
│   ├── hooks/              # Custom hooks
│   ├── contexts/           # Context providers
│   ├── utils/              # Utility functions
│   ├── types/              # TypeScript interfaces/types
│   ├── services/           # API services
│   ├── lib/                # Additional libraries/helpers
│   └── config/             # Configurations
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json

3. 基於特徵的結構

基於功能的結構是另一種方法，可以更輕鬆地管理和擴展新功能。很簡單

my-next-app/
├── public/                 # Static files
├── src/
│   ├── features/           # Separate by features/modules
│   │   ├── featureA/
│   │   │   ├── components/ # Components specific to FeatureA
│   │   │   ├── pages/      # Pages related to FeatureA
│   │   │   ├── hooks/      # Hooks specific to FeatureA
│   │   │   ├── services/   # API calls related to FeatureA
│   │   │   └── utils/      # Utility functions for FeatureA
│   │   └── featureB/       # Another feature module
│   ├── shared/             # Shared resources across features
│   │   ├── components/     # Shared components
│   │   ├── hooks/          # Shared hooks
│   │   ├── contexts/       # Shared contexts
│   │   └── utils/          # Shared utilities
│   ├── styles/             # Global styles
│   └── config/             # Configuration files
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json

4. Monorepo 結構與 NX 或 Turborepo

這種結構是在一個地方包含多個專案或模組的專案管理。適合需要明確分離開發各部分的大型團隊或專案

my-next-monorepo/
├── apps/                   # Applications (Next.js, React, etc.)
│   ├── web/                # Next.js app
│   └── admin/              # Another Next.js app or admin panel
├── packages/               # Shared packages or libraries
│   ├── ui/                 # UI component library
│   ├── utils/              # Utility functions
│   ├── hooks/              # Custom hooks
│   └── services/           # API service packages
├── .gitignore
├── nx.json                 # NX configuration (if using NX)
├── turbo.json              # Turborepo configuration (if using Turborepo)
├── package.json
└── tsconfig.json

5. 分層架構

分層架構設計，輕鬆分離專案功能

my-next-app/
├── public/                 # Static files
├── src/
│   ├── presentation/       # UI components, pages, and routing
│   │   ├── components/     # UI components
│   │   ├── pages/          # Next.js pages
│   │   └── routes/         # Custom routing logic
│   ├── domain/             # Business logic and entities
│   │   ├── entities/       # Domain entities
│   │   ├── useCases/       # Business use cases
│   │   └── repositories/   # Interfaces for data repositories
│   ├── infrastructure/     # Data access and external services
│   │   ├── api/            # API service implementations
│   │   ├── db/             # Database access
│   │   └── thirdParty/     # Third-party integrations
│   ├── shared/             # Shared utilities and configurations
│   │   ├── utils/          # Utility functions
│   │   └── config/         # Configuration files
│   └── styles/             # Global styles
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json

6. 帶有 Storybook 的組件驅動結構

使用 Storybook 是獨立 UI 元件的系統測試和開發。可以輕鬆測試組件功能

my-next-app/
├── public/                 # Static files
├── src/
│   ├── components/         # UI components
│   │   ├── Button/         # Button component
│   │   │   ├── Button.tsx
│   │   │   ├── Button.stories.tsx
│   │   │   └── Button.test.tsx
│   │   └── Input/          # Input component
│   ├── pages/              # Next.js pages
│   ├── hooks/              # Custom hooks
│   ├── utils/              # Utility functions
│   ├── styles/             # Global styles
│   └── config/             # Configuration files
├── .storybook/             # Storybook configuration
│   ├── main.js
│   └── preview.js
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json

選擇結構時要考慮的因素

選擇項目結構取決於許多因素，例如

1. 專案大小：如果專案很大選擇可以輕鬆管理和擴展專案的結構。
2. 開發團隊規模：如果您有一個大型團隊您應該選擇一個能夠清楚地分隔各個部分以便一起工作的結構
3. 專案複雜度：專案是否複雜。您應該選擇一個可以處理這些複雜性的結構
4. 使用的技術：使用的技術（例如 Next.js、TypeScript 和 Storybook）可能會被正確建構和推薦

專案結構的最佳實務

• 保持組件小且可重複使用：組件應該做一件事並且做得很好。跨
重複使用組件

項目。

• 明智地使用上下文：利用 React Context API 来管理需要访问相同数据的组件之间的状态。
• 组织样式：使用 CSS 模块或样式组件实现模块化，高效组织 CSS/SASS 文件。
• 利用 TypeScript 实现类型安全：定义类型和接口以确保类型安全和更好的代码可读性。
• 编写测试：包括组件和实用程序的单元和集成测试，以确保功能。

需要考虑的工具

• 故事书：用于UI组件开发和测试
• 玩笑：用于测试和检查代码
• ESLint：用于检查和格式化代码
• Prettier：用于自动代码格式化
• Husky & Lint-Staging：用于设置预提交挂钩
• Next.js 自定义服务器：用于使用服务器端逻辑

希望这些信息可以帮助您为前端开发选择正确的项目结构！

以上是前端專案結構有多少種類型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！