Routing trong Next.js

1. Giới thiệu về Routing trong Next.js

Khi nhắc đến routing trong Next.js, người ta thường nhắc đến những điều sau:

• Cơ chế File-system base routing: hiểu đơn giản là tạo ra 1 file cũng là đã tạo ra đường dẫn đến trang web mà file đó thể hiện, tên file sẽ là đường dẫn.
• Khi mà 1 file được thêm vào folder pages ở trong project, thì nó sẽ tự động trở thành 1 đường dẫn ở trong dự án Next.js. Ví dụ, mình thêm 1 file about.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.
• Bằng việc chúng ta tạo ra các file, folder ở trong folder pages, thì có thể tạo ra hầu hết các đường dẫn mà chúng ta cần cho 1 trang web rồi.

2. Cách thức hoạt động của bộ định tuyến:

Next.js tự động xử lý tất cả các file với các đuôi .js, .jsx, .ts hoặc .tsx trong cây thư mục như một route.

Một trang trong Next.js là React component có route dựa trên tên file của nó.

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

Đường dẫn tương ứng của các page:

index.js nhận url là http://localhost:3000

contact.js nhận url là http://localhost:3000/contact

3. How to link between pages

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>My second page</a>
      </Link>

    </div>
  )
}

Trên ví dụ trên, chúng ta hiện có 1 routes

/contact có url http://localhost:3000/contact

Link component có thể nhận một số thuộc tính, nhưng chỉ thuộc tính href là bắt buộc.

Ở đây, chúng ta sử dụng thẻ <a></a> làm thành phần con để liên kết các trang.

Ngoài ra, bạn có thể sử dụng bất kỳ phần tử nào hỗ trợ sự kiện onClick trên Link component.

4. Dynamic routes

Next.js cho phép bạn xác định các route động trong ứng dụng của mình bằng cách sử dụng dấu ngoặc vuông ([param]).

Thay vì đặt tên tĩnh trên các trang của mình, bạn có thể sử dụng tên động.

Ví dụ:

Next.js sẽ lấy các route params được truyền vào và sau đó sử dụng nó làm tên cho route đó

# index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[contact]" as="/my-slug">
          <a>First Route</a>
        </Link>
      </li>
    </ul>
  )
}

Ở đây, chúng ta phải xác định giá trị trên thuộc tính as vì đường dẫn là động.

Tên của route sẽ là bất cứ điều gì bạn đặt trên as prop.

5. Kết luận

Trên là những tìm hiểu của mình về route trong Next.js, hi vọng giúp ích được cho mọi người

Thanks for watching !!!