Folder Structure Strategies

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.

1. Cấu trúc mặc định + ColocationKhuyên dùng

Cách Next.js chính thức khuyến nghị cho hầu hết dự án vừa & nhỏ

Đâ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.

2. Feature-based / Domain-driven structure

Rất phổ biến cho dự án trung bình → lớn

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:

Dễ scale theo team (mỗi team làm 1 feature)
Dễ xóa feature (xóa cả folder)
Giữ tính đóng gói cao

3. Atomic Design + Feature Folders

Kết hợp - thường thấy trong dự án lớn, design system mạnh

components/
├── atoms/
├── molecules/
├── organisms/
├── templates/
└── pages/

4. Server Components vs Client Components

Rất quan trọng 2025 - Tách rõ ràng để dễ quản lý "use client"

Cách 1 – Tách folder

components/
├── server/
├── client/
└── shared/

Cách 2 – Dùng hậu tố (phổ biến hơn)

components/
├── server/
├── client/
└── shared/

So sánh nhanh các strategy phổ biến 2025

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	★★★★★

Lời khuyên thực tế 2025

•Dùng src/ folder (để tách biệt code với config)
•Đặt Server Actions gần nơi sử dụng (trong folder feature hoặc file actions.ts)
•Dùng (group) để gom các route không ảnh hưởng URL
•Đặt tên file rõ ràng: page.tsx, layout.tsx, route.ts, loading.tsx, error.tsx
•Nếu dùng tRPC / React Query / RTK Query → tạo folder queries/ hoặc api/ trong feature
•Đừng lạm dụng quá nhiều layer trừ khi dự án > 50–100 màn hình