Các Nguyên Tắc Cơ Bản Về Routing (Định Tuyến) trong NextJS - Bài 4

Bộ khung của mỗi ứng dụng là định tuyến. Qua bài viết này, tôi sẽ giới thiệu cho bạn các khái niệm cơ bản về định tuyến cho web và cách xử lý Routing định tuyến trong Next.js.

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

Đầu tiên, bạn sẽ thấy các thuật ngữ này được sử dụng xuyên suốt tài liệu.

Thuật Ngữ Về Cây thư mục

Cây (Tree): Một quy ước để hình dung cấu trúc phân cấp. Ví dụ, một cây gồm các thành phần cha và con, một cấu trúc thư mục, v.v.
Cây Con (Subtree): Một phần của cây, bắt đầu từ một gốc mới (đầu tiên) 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
Lá (Leaf): Các nút trong cây con không có con, chẳng hạn như đoạn cuối cùng trong đường dẫn URL.

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ởi các 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).

App Routing

Trong phiên bản 13, Next.js trở lên, NextJS sẽ xây dựng định tuyến theo cấu trúc mới App rounting. Cấu trúc này bổ sung nhiều tính năng mới như hỗ trợ chia sẻ layout, định tuyến lồng nhau, hiển thị trạng thái loading khi đang tải trang, xử lý lỗi như khi trang không được tải đúng cách thì sẽ hiển thị bằng 1 template thay thế. Như trong ReactJS, các chức năng này sẽ được thực hiện thủ công. Đối với NextJS, đã hỗ trợ tự động các tính năng này.
App Routing được cài đặt tại một thư mục mới có tên là app. Lưu ý: bạn có thể sử dụng phương pháp định tuyến cũ page routing và dùng chung với app routing. Tôi đề xuất không sử dụng đồng thời 2 phương pháp này trong cùng 1 project.
Mặc định, các component bên trong app là các component phía Server. Đây là một tối ưu hóa hiệu suất và cho phép bạn dễ dàng áp dụng chúng, và bạn cũng có thể sử dụng các conponent Client.

Vai Trò Của Thư Mục Và Tệp

Next.js sử dụng thư mục để Routing trong dự án của bạn, trong đó:
Thư mục được sử dụng để xác định các tuyến. Một tuyến là một đường dẫn đơn của các thư mục lồng nhau, theo cấu trúc phân cấp của hệ thống tệp từ thư mục gốc đến một thư mục lá cuối cùng chứa tệp page.js.
Tệp được sử dụng như 1 route segment.

Route segment

Mỗi thư mục trong một tuyến đại diện cho một Route segment. Mỗi segment được ánh xạ tới một đoạn tương ứng trong đường dẫn URL.

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ể thêm một route mới /dashboard/settings bằng cách lồng hai thư mục mới trong thư mục app.
Ví dụ: Routte /dashboard/settings bao gồm ba đoạn:

/ Root
dashboard
settings

File Conventions

Next.js cung cấp một tập hợp các tệp đặc biệt để tạo giao diện người dùng với hành vi cụ thể trong các Nested Routes:

layout: chia sẻ 1 template cho các segment nằm trong route này
page: file hiển thị giao diện của bạn
loading: giao diện loading hiển thị khi page của bạn đang được tải
not-found: trang hiển thị 404 not found khi không có page nào tương ứng với URL của bạn
error: Giao diện lỗi cho một đoạn và các đoạn con của nó
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 đặc biệt
default: Giao diện dự phòng cho các Tuyến Song Song Lưu ý: Các file đặc biệt có thể sử dụng các phần mở rộng .js, .jsx, hoặc .tsx.