1. Giới thiệu

Từ Next.js 13, App Router (thư mục app/) đã thay thế hệ thống pages/ cũ.

Đây không chỉ là thay đổi thư mục — đó là sự thay đổi mô hình hoàn toàn trong routing, layouts và data fetching.

Hãy cùng thành thạo nó. Từng bước một.

2. App Router vs Pages Router

3. Nested Layouts

Mỗi thư mục có thể có layout.tsx → tự động lồng nhau.

app/├── layout.tsx          // Root layout (html, body)├── dashboard/│   ├── layout.tsx      // Dashboard shell (sidebar)│   └── page.tsx        // Dashboard home└── blog/  └── layout.tsx      // Blog layout (author bio)

Không truyền props. Không code trùng lặp. Layouts wrap children tự động.

4. Loading và Error States

4.1 Loading UI

// app/dashboard/loading.tsxexport default function Loading() {  return <div className="animate-pulse">Đang tải dashboard...</div>;}

→ Hiển thị trong khi page.tsx đang fetch dữ liệu

4.2 Xử lý Lỗi

// app/dashboard/error.tsx
'use client';
export default function Error({ error }: { error: Error }) {
  return <p className="text-red-600">Lỗi: {error.message}</p>;
}

5. Route Groups

Sử dụng thư mục (group) để nhóm routes logic — không thay đổi URL.

app/├── (marketing)/│   ├── about/page.tsx     → /about│   └── contact/page.tsx   → /contact└── (app)/  └── dashboard/page.tsx → /dashboard

Hoàn hảo cho shared layouts, A/B testing, hoặc thư mục theo nhóm

6. Parallel Routes

Render nhiều page.tsx trong cùng layout sử dụng cú pháp @folder.

// app/dashboard/@analytics/page.tsxexport default function Analytics() { return <Chart />; }// app/dashboard/@team/page.tsxexport default function Team() { return <TeamList />; }// app/dashboard/layout.tsxexport default function Layout({  children,  analytics,  team,}: {  children: React.ReactNode;  analytics: React.ReactNode;  team: React.ReactNode;}) {return (  <>    <Sidebar />    <main>{children}</main>    <aside>{analytics}</aside>    <footer>{team}</footer>  </>);}

→ /dashboard hiển thị main + analytics + team đồng thời

7. Route Interception

Chặn một route mà không điều hướng — hoàn hảo cho modals.

// app/@modal/(.)photo/[id]/page.tsx// → /photo/123 → mở như modal, URL giữ nguyên /feed

Click ảnh → modal mở, URL cập nhật, nút back đóng nó

8. Lỗi Thường Gặp

// 1. Trộn app/ và pages/app/page.tsx + pages/api/hello.ts → Không thể đoán trước// 2. Chỉ đặt page.tsx ở rootapp/nested/page.tsx → Phải có thư mục!// 3. Quên 'use client' trong client components

9. Best Practices

// 1. Sử dụng loading.tsx mọi nơiapp/settings/loading.tsx → UX tức thì// 2. Dùng route groups cho shared layoutsapp/(admin)/users/page.tsxapp/(admin)/settings/page.tsx// 3. Luôn export default từ page/layout

10. Hướng dẫn Migration

• Chuyển dần từ pages/ → app/
• Sử dụng thư mục (group) cho shared layouts
• Thêm loading.tsx cho các trang chậm
• Thay thế _app.tsx bằng nested layout.tsx
• Sử dụng @folder cho parallel routes
• Test modals với (.)interception

11. Kết luận

App Router không chỉ là một thư mục mới.

Đó là React Server Components, streaming, nested layouts và modals không có JS — tất cả trong một.

Ngừng chiến đấu với _app.tsx. Ngừng wrap layouts thủ công. Hãy đón nhận App Router.

Ứng dụng của bạn sẽ nhanh hơn, sạch hơn và dễ bảo trì hơn.

Viết bởi Lina Chen

#NextJS #AppRouter #React #ServerComponents #WebDev #Frontend