Next.js - Trang

Trong Next.js, chúng ta có thể tạo các trang và điều hướng giữa chúng bằng cách sử dụng tính năng định tuyến hệ thống tệp. Chúng tôi sẽ sử dụngLink để có điều hướng phía máy khách giữa các trang.

Trong Next.js, một trang là một Thành phần React và được xuất từ thư mục trang. Mỗi trang được liên kết với một tuyến dựa trên tên tệp của nó. Ví dụ

pages/index.js được liên kết với tuyến đường '/'.
pages/posts/first.js được liên kết với tuyến đường '/ posts / first', v.v.

Hãy cập nhật dự án nextjs được tạo trong chương Thiết lập môi trường .

Tạo thư mục bài viết và first.js bên trong nó với các nội dung sau.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Thêm Hỗ trợ Liên kết để quay lại Trang chủ. Cập nhật first.js như sau:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

Thêm Hỗ trợ Liên kết vào trang chủ để điều hướng đến trang đầu tiên. Cập nhật index.js như sau:

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

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 đầu tiên và bạn sẽ thấy kết quả sau.