Hướng Dẫn Định Tuyến trong Next.js: Các Nguyên Tắc Cơ Bản và Thực Hành Hiệu Quả

Bộ khung của mỗi ứng dụng web chính là định tuyến. Trong bài viết này, chúng ta sẽ khám phá các khái niệm cơ bản về định tuyến trên web và cách thực hiện Routing trong Next.js một cách hiệu quả.

I. Thuật Ngữ về Routing (Định tuyến)

Khi đọc tài liệu về định tuyến, bạn sẽ gặp một số thuật ngữ quan trọng như sau:

1. Thuật Ngữ Về Cây Thư Mục

• Cây (Tree): Là cách hình dung cấu trúc phân cấp của các thư mục, ví dụ như các thành phần cha và con.
• Cây Con (Subtree): Một phần của cây bắt đầu từ một gốc mới và kết thúc tại các lá cuối cùng.
• Gốc (Root): Nút đầu tiên trong một cây, tương ứng với thư mục gốc của dự án.
• Lá (Leaf): Các nút trong cây con không có nút con, thường là tệp cuối cùng trong đường dẫn URL.

2. Thuật Ngữ Về Cấu Trúc URL

• URL (URL Segment): Một phần của đường dẫn URL, được phân tách bằng dấu gạch.
• Đường dẫn URL (URL Path): Phần của URL xuất hiện sau tên miền, bao gồm các đoạn.

II. Khái Niệm Về App Routing Trong Next.js

Từ phiên bản 13 trở đi, Next.js đã giới thiệu phương pháp App Routing mới, mang lại nhiều tính năng mới:

• Chia sẻ layout: Hỗ trợ việc chia sẻ cấu trúc giao diện giữa các tuyến.
• Định tuyến lồng nhau: Cho phép tạo các route phức tạp mà không cần thực hiện thủ công như trong ReactJS.
• Xử lý trạng thái loading: Hiện thị chỉ báo khi trang được tải.
• Xử lý lỗi: Khi một trang không tải đúng, một template thay thế sẽ được hiển thị.

Cấu Trúc App Routing

• App Routing được cấu hình trong thư mục mới có tên là app. Mặc dù bạn có thể vẫn sử dụng phương pháp định tuyến cũ (Page Routing), nhưng không nên sử dụng chúng đồng thời trong cùng một dự án để tránh xung đột.
• Mặc định, các component trong thư mục app sẽ hoạt động ở phía Server, tối ưu hóa hiệu suất và hỗ trợ việc áp dụng dễ dàng các component Client.

III. Vai Trò Của Thư Mục và Tệp Trong Định Tuyến

Trong Next.js, thư mục là cách chính được sử dụng để xác định các tuyến:

• Thư mục: Xác định một tuyến là đường dẫn đơn được cấu trúc theo hệ thống phân cấp từ gốc đến thư mục chứa tệp page.js cuối cùng.
• Tệp: Được sử dụng giống như một route segment.

IV. Route Segment

• Mỗi thư mục trong một tuyến tương ứng với một Route Segment, được ánh xạ tới một đoạn trong Đường dẫn URL.

V. Tạo Nested Routes

• Để tạo Nested Routes, bạn có thể lồng các thư mục bên trong nhau. Ví dụ, bạn có thể tạo một route mới /dashboard/settings bằng cách lồng hai thư mục mới trong thư mục app.
• Cụ thể:
  • /: Gốc
  • /dashboard: Đoạn đầu tiên
  • /settings: Đoạn con

VI. Các Tệp Đặc Biệt Trong Next.js

Next.js cung cấp một bộ tệp đặc biệt để thực hiện các hành vi nhất định trong các Nested Routes:

• layout: Chia sẻ 1 template cho các đoạn bên trong route này.
• page: Tệp hiển thị giao diện của bạn.
• loading: Giao diện hiển thị khi trang đang được tải.
• not-found: Trang hiển thị 404 khi không tìm thấy trang phù hợp với URL.
• error: Giao diện lỗi cho một đoạn và các đoạn con.
• global-error: Giao diện lỗi toàn cầu.
• route: Điểm cuối API phía máy chủ.
• template: Giao diện bố cục tái dựng.
• default: Giao diện dự phòng cho các tuyến song song.

VII. Cấu Trúc Của Các File Convention

Các tệp đặc biệt trong một đoạn tuyến được tổ chức theo cấu trúc phân cấp như sau:

• layout.js
• template.js
• error.js
• loading.js
• not-found.js
• page.js (có thể có thêm các layout.js bao bọc page.js của bạn)

Ngoài các tệp đặc biệt này, chỉ có nội dung do page.js hoặc route.js trả về mới có thể được truy cập công khai trong thư mục xác định tuyến.

Kết Luận

Thông qua bài viết này, bạn đã nắm vững các khái niệm cơ bản về định tuyến trong Next.js và có thể áp dụng chúng vào dự án của mình. Việc hiểu rõ cấu trúc và quy tắc sẽ giúp bạn xây dựng ứng dụng web hiệu quả hơn.
source: viblo