Kể từ phiên bản 13, Next.js đã đưa vào một hướng tiếp cận hoàn toàn mới trong cách tổ chức và xử lý hệ thống định tuyến. Thay vì sử dụng các phương pháp truyền thống như định nghĩa route qua file cấu hình hoặc khai báo hàm, framework này đã lựa chọn cấu trúc thư mục làm trung tâm của cơ chế định tuyến. Kiến trúc này, thường được gọi là App Router, mang đến sự rõ ràng, trực quan và dễ mở rộng cho các dự án web hiện đại. Trong bài viết này FPT Polytechnic TP HCM sẽ cùng bạn tìm hiểu về hệ thống Routing trong Next.js 13+.

File-based Routing

Trong Next.js 13+, mỗi thư mục con trong app/ chính là một phần của URL. Nếu trong thư mục đó có file page.tsx, thì nó được xem là một trang (route).

Ví dụ:

app/

├── page.tsx         → /

├── about/

│   └── page.tsx     → /about

└── contact/

└── page.tsx     → /contact

Với cách này, việc thêm mới một trang trở nên cực kỳ đơn giản, chỉ cần tạo thêm một thư mục kèm theo file page.tsx. Không còn cần viết thêm dòng cấu hình nào cả.

Route động – Khi URL có tham số

Để xử lý các đường dẫn có tham số như /post/123, Next.js sử dụng cú pháp đặt tên thư mục là [param].

app/

└── post/

└── [id]/

└── page.tsx

Trong page.tsx, bạn có thể lấy giá trị tham số đó như sau:

Vậy là chỉ cần cấu trúc thư mục phù hợp, bạn đã có thể xử lý route động một cách mượt mà.

Route nhiều cấp

Khi bạn cần làm việc với các đường dẫn nhiều lớp như /post/2024/march/nextjs, Next.js vẫn xử lý rất gọn gàng.

Cấu trúc:

app/

└── post/

└── [year]/

└── [month]/

└── [slug]/

└── page.tsx

Catch-all routes

Có những trường hợp bạn không biết trước URL sẽ có bao nhiêu phần, ví dụ /docs/intro/setup/linux/terminal. Đó là lúc cần tới catch-all routes với cú pháp […slug].

Ví dụ:

app/

└── docs/

└── […slug]/

└── page.tsx

Trong component:

Giải pháp này rất linh hoạt, đặc biệt với những hệ thống phân cấp sâu mà không cố định chiều dài.

Điều hướng bằng Link

Next.js cung cấp sẵn component Link để điều hướng giữa các trang mà không cần reload trình duyệt, một điểm cộng lớn nếu bạn muốn tạo trải nghiệm mượt như ứng dụng di động.

Loading.tsx – Giao diện chờ khi trang đang tải

Nếu trang cần thời gian để lấy dữ liệu (gọi API chẳng hạn), bạn có thể tạo một file loading.tsx nằm cạnh page.tsx. File này sẽ được hiển thị tạm thời trong lúc chờ dữ liệu xử lý xong.

app/

└── dashboard/

├── page.tsx

└── loading.tsx

Xử lý lỗi – not-found.tsx và error.tsx

Next.js cho phép bạn tùy chỉnh giao diện khi có lỗi xảy ra:

• not-found.tsx: Hiển thị khi người dùng truy cập một đường dẫn không tồn tại.
• error.tsx: Hiển thị khi có lỗi xảy ra trong quá trình render trang.

Ví dụ với not-found.tsx:

Kiến trúc định tuyến mới trong Next.js 13+ không chỉ là sự thay đổi về mặt kỹ thuật mà còn phản ánh xu hướng hiện đại trong phát triển web: cấu trúc rõ ràng, giảm phụ thuộc vào cấu hình, và dễ dàng mở rộng theo nhu cầu thực tế.

Giảng viên Nguyễn Quang Hùng
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM