App Router của Next.js dựa trên File-system Routing. Thư mục đóng vai trò là URL path, và các file đặc biệt bên trong đóng vai trò là giao diện hoặc logic.
1. Các File đặc biệt (Reserved Files)
Mỗi folder route có thể chứa các file "được đặt tên sẵn" mà Next.js sẽ tự động hiểu:
page.tsx: Giao diện chính của route (URL kết thúc tại đây).layout.tsx: Giao diện dùng chung cho route này và tất cả các route con. Giữ lại trạng thái (State) khi chuyển trang con.template.tsx: Tương tự layout nhưng luôn mount lại (remount) khi chuyển trang. Dùng cho animation hoặc reset state.loading.tsx: Tự động bọcpagetrong mộtSuspenseboundary.error.tsx: Tự động bọcpagetrong mộtError Boundary.not-found.tsx: Hiển thị khi không tìm thấy route hoặc gọi hàmnotFound().
2. Layout vs Template: Chọn cái nào?
| Tiêu chí | Layout (Ưu tiên) | Template (Nghiệp vụ) |
|---|---|---|
| Persistence | Giữ state, giữ vị trí scroll. | Reset hoàn toàn state. |
| Performance | Tốt hơn (không re-render lại phần chung). | Nặng hơn (mỗi lần chuyển trang là render mới). |
| Use case | Sidebar, Navbar, Footer. | Animation vào trang, Log page view, Form reset. |
tsx:
// 💡 Mẹo: Luôn dùng Layout mặc định trừ khi bạn thực sự muốn
// hiệu ứng "Reset" sạch sẽ khi chuyển giữa các trang cùng cấp.3. Nested Routes (Lồng ghép vô tận)
Cấu trúc cây folder phản chiếu cấu trúc UI.
Code:
app/
├── layout.tsx (Root Layout - HTML/Body)
├── dashboard/
│ ├── layout.tsx (Dashboard Sidebar)
│ ├── analytics/
│ │ └── page.tsx (URL: /dashboard/analytics)
│ └── settings/
│ └── page.tsx (URL: /dashboard/settings)Khi bạn vào /dashboard/analytics, Next.js sẽ lồng:
Root Layout -> Dashboard Layout -> Analytics Page.
4. Route Groups (folder)
Đôi khi bạn muốn tổ chức folder cho gọn nhưng không muốn folder đó xuất hiện trên URL. Hãy bọc tên folder trong dấu ngoặc đơn.
Code:
app/
├── (auth)/ <- Group này không có trong URL
│ ├── login/ <- URL: /login
│ └── register/ <- URL: /register
├── (main)/
│ └── page.tsx <- URL: /5. Dynamic Routes [slug]
Khi bạn cần URL động (ID bài viết, tên user):
app/blog/[slug]/page.tsx -> URL: /blog/hello-world.
Trong code, bạn nhận được:
tsx:
export default function Page({ params }: { params: { slug: string } }) {
return <div>Post: {params.slug}</div>;
}Kết luận
App Router mang lại khả năng tổ chức UI cực kỳ mạnh mẽ thông qua folder.
- Hãy dùng Layout để tiết kiệm tài nguyên.
- Dùng Route Groups để phân chia logic Admin/User/Marketing.
- Tận dụng Special Files (
loading,error) để trang web luôn mượt mà.