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

Question

Luyện Phỏng Vấn IT · Accepted Answer

File-based routing trong Next.js App Router là cơ chế biến cấu trúc thư mục và file bên trong app/ thành URL của ứng dụng mà không cần khai báo route thủ công. Mỗi thư mục con là một route segment, và một segment chỉ trở thành route truy cập được khi chứa file page.tsx (hoặc page.js). App Router xây dựng cây route lồng nhau dựa trên file system và cho phép colocation: component, style hay test đặt cạnh route. layout.tsx định nghĩa UI chung cho segment và tất cả segment con, được giữ lại khi điều hướng client-side nên không mất state và không fetch lại không cần thiết. Việc lồng layout giúp chia sẻ header, sidebar hay provider mà không lặp lại code ở mỗi page. loading.tsx tự động bọc page.tsx cùng cấp trong Suspense để hiển thị fallback trong khi Server Component đang fetch dữ liệu. error.tsx phải là Client Component ('use client') và hoạt động như Error Boundary cho segment đó, còn not-found.tsx được render khi bạn gọi notFound() trong Server Component. [param] tạo dynamic segment, giá trị lấy từ params của page.tsx hoặc layout.tsx. Từ Next.js 15, params là Promise nên bạn cần await params. [...slug] là catch-all, khớp /blog/a/b thành ['a','b']; [[...slug]] là optional catch-all, khớp cả /blog. (group) là route group, cho phép gom nhiều route dưới cùng một layout mà không thêm tiền tố vào URL. route.ts thay vì page.tsx sẽ tạo Route Handler cho API endpoint, không tạo trang. Đặt page.tsx mà thiếu layout.tsx gốc sẽ thiếu và nên build báo lỗi. Quên 'use client' trong error.tsx sẽ lỗi build vì Error Boundary bắt buộc chạy phía client. Nhầm [...slug] với [[...slug]] khiến route /docs trả 404 khi bạn muốn nó vẫn khớp. Lưu ý: Chỉ page.tsx và route.ts mới tạo endpoint truy cập được; layout.tsx, loading.tsx, error.tsx và not-found.tsx chỉ là file quy ước bổ trợ và không tự tạo URL nếu thiếu page.tsx.