Làm việc với App Router (Next.js 13+)

Từ phiên bản Next.js 13, App Router được giới thiệu như một cách tiếp cận mới để xây dựng ứng dụng React theo hướng module hóa, dễ mở rộng và logic hơn. Bài học này sẽ giúp bạn hiểu:

• App Router là gì và tại sao nó thay thế Pages Router truyền thống
• Cách tổ chức thư mục app/ và vai trò của từng file như layout.tsx, page.tsx, loading.tsx, error.tsx
• Cách tạo routing động và nested layout một cách mạch lạc, rõ ràng

Làm việc với App Router (Next.js 13+)

1. App Router là gì?

• App Router là hệ thống routing mới của Next.js 13+, hoạt động dựa trên thư mục app/ thay vì pages/.
• Nó hỗ trợ tốt hơn cho:
  • Nested routing
  • Layout dùng chung
  • Loading, error UI riêng biệt
  • Server Components (bên cạnh Client Components)

So sánh nhanh:

2. Cấu trúc thư mục app/ cơ bản

app/
├── layout.tsx        // Layout bao ngoài tất cả routes
├── page.tsx          // Trang chính (giống như index.js)
├── loading.tsx       // UI khi loading
├── error.tsx         // UI khi có lỗi
├── about/
│   └── page.tsx      // Route /about
└── dashboard/
    ├── layout.tsx    // Layout riêng cho dashboard
    ├── page.tsx      // Route /dashboard
    └── settings/
        └── page.tsx  // Route /dashboard/settings

layout.tsx: có thể khai báo nhiều cấp, bao layout cho child route bên trong.

3. Tạo route động trong App Router

• Cú pháp giống Pages Router nhưng áp dụng trong thư mục app/
  Ví dụ:

app/
└── blog/
    └── [slug]/
        └── page.tsx

• Trong file page.tsx, bạn truy cập biến động qua params:

export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>Bài viết: {params.slug}</h1>;
}

4. Nested layout & composition

• Có thể tạo layout cho từng nhóm route:

app/
└── dashboard/
    ├── layout.tsx      // Layout riêng cho dashboard
    ├── page.tsx        // Trang /dashboard
    └── analytics/
        └── page.tsx    // Trang /dashboard/analytics

• layout.tsx sẽ tự động wrap tất cả các child route trong nhánh đó.

Ví dụ:

// dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Layout có thể lồng nhiều cấp, rất phù hợp cho các hệ thống có nhiều màn hình con như dashboard, CMS, v.v.

Kết luận

App Router là bước tiến mạnh mẽ của Next.js trong việc hiện đại hóa cấu trúc ứng dụng React. Bằng cách sử dụng layout lồng, routing rõ ràng, UI riêng cho loading & error, bạn sẽ có một ứng dụng dễ quản lý, mở rộng và chuyên nghiệp hơn rất nhiều so với cách cũ.