File-based routing hoạt động như thế nào trong App Router?

Question

Accepted Answer

Trong App Router, **cấu trúc thư mục bên trong `app/` định nghĩa các route của bạn** — không cần viết cấu hình router nào. Mỗi thư mục là một segment của URL, và các file đặc biệt bên trong nó định nghĩa segment đó render cái gì. ## Thư mục = các segment của URL ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (dynamic segment) shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL) ``` ## Các file đặc biệt Mỗi thư mục có thể chứa các tên file dành riêng, mỗi tên có một vai trò cụ thể: ```text page.tsx → the route's UI (REQUIRED to make a segment routable) layout.tsx → shared wrapper that persists across child routes loading.tsx → loading UI (auto-wraps the page in ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## Dynamic segments ```tsx // app/blog/[slug]/page.tsx → khớp /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` Dấu ngoặc vuông tạo ra một tham số động được truyền vào page qua `params`. Các biến thể: `[...slug]` (catch-all), `[[...slug]]` (optional catch-all). ## Route groups & tổ chức ```text app/(marketing)/about/page.tsx → /about (thư mục (marketing) bị bỏ qua trong URL) ``` Dấu ngoặc đơn tạo ra **route groups** để tổ chức file hoặc áp dụng các layout khác nhau mà không ảnh hưởng đến URL. ## Tại sao điều này quan trọng File-based routing làm cho cấu trúc URL hiện rõ ngay từ cây file — không có cấu hình route tập trung nào phải duy trì và đồng bộ. Biết các tên file đặc biệt (`page`, `layout`, `loading`, `error`, `route`) và các quy ước dấu ngoặc (`[param]`, `[...catchAll]`, `(group)`) là vốn từ vựng cốt lõi để xây dựng bất kỳ app App Router nào.