Next.js App Router: Tổ chức Router thông minh

app directory là nơi chứa Pages. Nhưng nếu bạn để tất cả Business Logic vào đây, nó sẽ rất bừa bãi.

1. Route Groups (group)

Tách biệt các luồng của ứng dụng mà không thay đổi URL.

app/
  (marketing)/      <- URL: /
    page.tsx
    layout.tsx      <- Layout cho Landing Page (Có Footer to)
    pricing/
  (dashboard)/      <- URL: /dashboard (không phải /dashboard/dashboard)
    dashboard/
      page.tsx
    settings/
    layout.tsx      <- Layout App (Có Sidebar, Header logged in)

Lợi ích: Mỗi Group có layout riêng biệt hoàn toàn.

2. Colocation (Component ngay tại chỗ)

Trước đây (Pages Router), pages folder chỉ được chứa pages. Bây giờ (App Router), app folder có thể chứa bất cứ thứ gì.

app/
  dashboard/
    page.tsx
    layout.tsx
    ChartWidget.tsx     <- ✅ Component con của Dashboard
    useDashboardData.ts <- ✅ Hook riêng của Dashboard
    helpers.ts

Bạn không cần tạo folder components/DashboardChart nữa. Hãy để nó ngay cạnh nơi sử dụng nó. Dễ tìm, dễ sửa.

3. Private Folders _folder

Nếu bạn muốn tạo folder trong app chỉ để chứa UI chung, không muốn nó biến thành Route công khai. Hãy thêm dấu gạch dưới _.

app/
  _components/      <- Không tạo ra URL /_components
    Button.tsx
    Modal.tsx
  _lib/
    db.ts

4. Chiến lược "App as Router Only"

Nhiều team lớn chọn cách: Giữ app folder thật mỏng. Logic chính vẫn nằm ở src/features.

src/
  app/
    dashboard/
      page.tsx  -> Import { DashboardPage } from '@/features/dashboard'
  features/
    dashboard/
      components/
      index.ts  -> export DashboardPage

Lợi ích: Tách biệt hoàn toàn Framework (Next.js Routing) và Business Logic. Dễ dàng Unit Test feature mà không phụ thuộc Next.js.

Kết luận

• Dùng Route Groups để chia Layout.
• Dùng Colocation cho các component nhỏ lẻ, dùng một lần.
• Dùng Feature Folder (bên ngoài app) cho các logic nghiệp vụ phức tạp.