Loading...
Loading...
Loading...
Các strategy phổ biến để tổ chức folder/file trong dự án Next.js (App Router), từ cơ bản đến nâng cao, phù hợp với các quy mô dự án khác nhau.
Đây là cách Next.js chính thức khuyến nghị và cũng là cách phổ biến nhất hiện nay (2025).
src/ (hoặc không có src/, đặt trực tiếp ở root)
├── app/ ← mọi thứ liên quan đến routing nằm đây
│ ├── layout.tsx
│ ├── page.tsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── (auth)/ ← group route (không ảnh hưởng URL)
│ │ ├── login/
│ │ │ └── page.tsx
│ │ └── register/
│ │ └── page.tsx
│ ├── dashboard/ ← route thật
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── users/
│ │ │ └── page.tsx
│ │ └── settings/
│ │ └── page.tsx
│ └── api/ ← Route Handlers (API)
│ └── webhook/
│ └── route.ts
├── components/ ← UI chung, reusable
│ ├── ui/ ← shadcn/ui, Radix, hoặc tự build
│ │ ├── button.tsx
│ │ └── card.tsx
│ ├── layout/ ← Header, Footer, Sidebar...
│ └── feature/ (tùy chọn)
├── lib/ ← non-UI logic, utilities
│ ├── utils.ts
│ ├── auth.ts
│ └── db.ts
├── hooks/ ← custom hooks
├── types/ ← TypeScript types chung
├── styles/ (nếu không dùng tailwind globals)
└── actions/ ← Server Actions (nếu tách riêng)Khi nào dùng?
Dự án vừa & nhỏ, team 1–8 người, muốn nhanh, dễ maintain.
Mỗi tính năng lớn được gói gọn thành một folder riêng (vertical slice).
app/
├── features/
│ ├── auth/
│ ├── dashboard/
│ ├── products/
│ └── users/Ưu điểm:
components/
├── atoms/
├── molecules/
├── organisms/
├── templates/
└── pages/components/
├── server/
├── client/
└── shared/components/
├── server/
├── client/
└── shared/| Quy mô dự án | Strategy khuyến nghị | Ưu tiên chính | Độ phức tạp |
|---|---|---|---|
| Cá nhân / nhỏ | Colocation + src/app + components/ui | Đơn giản, nhanh | ★☆☆☆☆ |
| Startup vừa | Feature folders + colocation | Dễ scale theo tính năng | ★★☆☆☆ |
| Sản phẩm lớn | Domain/Feature + Atomic + tách server/client | Team lớn, design system mạnh | ★★★★☆ |
| Enterprise | Modular + monorepo + packages/ui | Chia module, tái sử dụng cross-project | ★★★★★ |
src/ folder (để tách biệt code với config)(group) để gom các route không ảnh hưởng URLpage.tsx, layout.tsx, route.ts, loading.tsx, error.tsxqueries/ hoặc api/ trong feature