Project Structure Guide
项目目录结构与文件组织规范。
Core Directories
| Directory | Purpose |
|---|---|
app/ | Routes, layouts, pages (App Router) |
components/ui/ | shadcn/ui primitives |
components/layout/ | Layout components |
components/common/ | Business components |
lib/services/ | API service layer |
lib/utils.ts | Utility functions |
types/ | Type declarations |
hooks/ | Custom hooks |
contexts/ | React contexts |
Route Groups
code
app/ ├── (auth)/ # Login, register ├── (main)/ # Dashboard, settings ├── (marketing)/ # Landing, pricing └── (admin)/ # Admin panel
Forbidden Directories
- •
src/- Conflicts with App Router - •
shared/- Usecomponents/common - •
helpers/- Uselib/utils - •
services/(root) - Must be inlib/services
File Naming
- •Directories:
kebab-case(user-profile/) - •Components:
kebab-case.tsx(user-card.tsx) - •Services:
[name].service.ts - •Types:
types.ts
Example: Add User Feature
code
app/(main)/users/ ├── page.tsx └── [id]/page.tsx components/common/users/ ├── user-table.tsx └── user-filters.tsx lib/services/user/ ├── user.service.ts ├── types.ts └── index.ts
Modularization Rules
| Condition | Action |
|---|---|
| Component > 150 lines | Split into subcomponents |
| Page > 200 lines | Extract to components |
| Repeated code 2+ times | Create reusable component |
| Sample data > 20 lines | Extract to data.ts |