File-system Routing - router trong nextjs

Router trong nextjstheo cách hiểu đơn giản

Routing chính là việc chúng ta tạo ra nhiều url, nhờ đó chúng ta có thể di chuyển trang ( url ) qua lại trong 1 trang web. Với Reactjs thì chúng ta sẽ cần cài thêm 1 package là react-router-dom, còn với Next.js thì vì nó là framework rồi nên nó có tích hợp sẵn rồi chúng ta chỉ cần bốc ra xài thôi 😄 

Giới thiệu route trong nextjs

Trong nextjs thì chúng ta có vài lưu ý về route như sau:

1.Cơ chế File-system base routing

Bạn tạo ra 1 file system route là bạn đang tạo ra 1 file, mà file đó thông qua nextjs thể hiện ra 1 url. 

2. File name trong folder pages

Mỗi 1 file trong folder pages là 1 thể hiện của router. Mà nơi đó chính là file system đang được đề cập. 

Ví dụ, mình thêm 1 file about.ts ( tuỳ bạn đang dùng typescript thì dùng đuôi .ts không thì dùng .js )vào folder pages thì chúng ta có ngay 1 đường dẫn vào trang, ví dụ là: localhost:3000/about rồi.

3. Các loại route trong nextjs

Chúng ta luôn có 3 loại route trong nextjs gồm: 

• index route : là các route mà được tạo trong folder pages với file name ở ngang cấp với file index.ts ( file level 1 ) ví dụ trong hình ở trên chugns ta gọi index.js và about.js là index route.
• nested route: là route mà ở đó file được bố cục trong cái folder trong folder pages
• dynamic route: là file nhận tham số url vào ví dụ để nhận product id từ url thì bạn cần tạo 1 folder có tên products trong đó tạo 1 file có tên dạng : [id].ts khi đó param nhận vào là id

Chi tiết route nextjs và các ví dụ cụ thể

Hãy xem xét cấu trúc thư mục này như một ví dụ:

├── pages                 # (folder)
|  ├── index.jsx
|  ├── contact.jsx
|  └── products           # (folder)
|     ├── create.jsx
|     ├── [id].jsx
|     ├── index.jsx 
|     └── [productId]     # (folder) 
|         └── user        # (folder)
|             ├── [id].jsx
#

Đường dẫn tương ứng của các page theo cấu trúc sẽ như sau:

• index.jsx nhận url là http://localhost:3000
• contact.jsx nhận url là http://localhost:3000/contact
• products/index.jsx là page sub-folder trong folder chính, nên nhận url http://localhost:3000/products
• products/about.jsx tương tự, thì sẽ nhận url http://localhost:3000/products/about
• products/[id].jsx tương tự, thì sẽ nhận url http://localhost:3000/products/123456 với số 123456 sẽ passing vào trong useRouter của react để làm tham số
• products/[productId]/user/[id].jsx là dạng multi param và đối với trường hợp này nó sẽ matching và trả ra trong param gồm 2 thành phần 1 là productId, 2 là id user
• Có 1 trường hợp khác đặc biệt hơn ng ta cũng hay dùng là "cacht all route" đó là trường hợp sử dụng [...slug].jsx thì dấu "..." biểu thị cái gì cũng được nên trả về là 1 mảng matching. Ví dụ : [...params].jsx sẽ match với đường dẫn /docs/a, hay /docs/a/b, /docs/a/b/c bất cứ đường dẫn nào sau /docs.
• Trường hợp cuối là optional catch all route: [[...params]].jsx Nghĩa là có param cũng được không có cũng được

link giữa cácpages

Theo mặc định, Next.js pre-render mọi trang để làm cho ứng dụng của bạn nhanh và thân thiện với người dùng (tham khảo thêm).

Nó sử dụng Link component được cung cấp bởi next/link để cho phép chuyển đổi giữa các route.

import Link from "next/link"

export default function IndexPage() {
  return (
    <div>
      <Link href="/contact">
        <a>bấm chuyển đến trang liên hệ</a>
      </Link>
      <Link href="/products/about">
        <a>trang product liên hệ</a>
      </Link>
    </div>
  )
}