Next.js - Định tuyến

Next.js sử dụng bộ định tuyến dựa trên hệ thống tệp. Bất cứ khi nào chúng tôi thêm bất kỳ trang nào vàopagesthư mục, nó tự động có sẵn thông qua url. Sau đây là các quy tắc của bộ định tuyến này.

Index Routes- Tệp index.js có trong thư mục ánh xạ tới thư mục gốc. Ví dụ -
- pages / index.js ánh xạ tới '/'.
- các trang / bài viết / index.js ánh xạ tới '/ bài viết'.
Nested Routes- Bất kỳ cấu trúc thư mục lồng nhau nào trong thư mục trang do bộ định tuyến url tự động. Ví dụ -
- các trang / cài đặt / bảng điều khiển / about.js ánh xạ tới '/ cài đặt / bảng điều khiển / giới thiệu'.
- các trang / bài viết / first.js ánh xạ tới '/ bài viết / đầu tiên'.
Dynamic Routes- Chúng tôi cũng có thể sử dụng tham số được đặt tên để khớp với url. Sử dụng dấu ngoặc cho giống nhau. Ví dụ -
- pages / posts / [id] .js ánh xạ tới '/ posts /: id', nơi chúng tôi có thể sử dụng URL như '/ posts / 1'.
- pages / [user] /settings.js ánh xạ tới '/ posts /: user / settings' nơi chúng tôi có thể sử dụng URL như '/ abc / settings'.
- pages / posts / [... all] .js ánh xạ tới '/ posts / *', nơi chúng tôi có thể sử dụng bất kỳ URL nào như '/ posts / 2020 / jun /'.

Liên kết trang

Next.JS cho phép liên kết các trang ở phía máy khách bằng thành phần Phản ứng liên kết. Nó có các thuộc tính sau:

href- tên của trang trong thư mục trang. Ví dụ/posts/first trong đó đề cập đến first.js có trong thư mục trang / bài viết.

Hãy tạo một ví dụ để chứng minh điều tương tự.

Trong ví dụ này, chúng tôi sẽ cập nhật trang index.js và first.js để thực hiện một lần truy cập máy chủ để lấy dữ liệu.

Hãy cập nhật dự án nextjs được sử dụng trong chương Hỗ trợ CSS toàn cầu .

Cập nhật tệp index.js trong thư mục trang như sau.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Khởi động Máy chủ Next.js

Chạy lệnh sau để khởi động máy chủ -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Xác minh đầu ra

Mở localhost: 3000 trong trình duyệt và bạn sẽ thấy kết quả sau.

Nhấp vào liên kết bài đăng đầu tiên.