Thư mục tạo thành tuyến đường

Hầu hết framework đều yêu cầu bạn ghi lại các đường dẫn (route) ở một nơi nào đó: một danh sách đường dẫn, mỗi đường dẫn đi kèm với một thành phần (component). Thay vào đó, Next.js đọc các đường dẫn từ cây thư mục của bạn.

Toàn bộ quy tắc gói gọn trong một dòng: một thư mục bên trong app/ là một phần của URL, còn page.jsx bên trong thư mục đó là nội dung khách truy cập nhìn thấy.

app/
    page.jsx                 ->  /
    about/
        page.jsx             ->  /about
    menu/
        page.jsx             ->  /menu
        drinks/
            page.jsx         ->  /menu/drinks

Đọc URL bằng cách đi xuống cây thư mục. /menu/drinks là thư mục menu, tiếp đến là thư mục drinks, rồi đến trang bên trong thư mục đó. Thư mục lồng nhau thì URL cũng lồng nhau. Không có bước riêng nào.

Nửa còn lại của quy tắc cũng quan trọng không kém: thư mục chỉ trở thành một đường dẫn khi có page.jsx.

app/
    menu/
        drinks/
            page.jsx         ->  /menu/drinks  works
        MenuCard.jsx                           not a route
                             ->  /menu         404

Ở đây, app/menu/ tồn tại, nhưng không ai có thể truy cập /menu: trong đó không có tệp trang nào. Nó chỉ là một thư mục chứa trên đường dẫn đến /menu/drinks. Đây là một tính năng: bạn có thể nhóm các tệp liên quan trong app/ mà không vô tình công khai một URL.

Và tên thư mục (folder) chính là phân đoạn URL, đúng từng ký tự. Nếu đặt tên thư mục là About Us, URL sẽ là /About%20Us, vì vậy tên thư mục định tuyến được viết thường và dùng dấu gạch nối: app/about-us/.