Liên kết hai trang trong Next.js bằng Liên kết

Cách liên kết hai hoặc nhiều trang trong Next.js

Hướng dẫn này bắt đầu khihướng dẫn Next.js đầu tiênrời khỏi. Chúng tôi đã xây dựng một trang web với một trang:

Tôi muốn thêm một trang thứ hai vào trang web này, một danh sách các bài đăng trên blog. Nó sẽ được phục vụ vào/blogvà hiện tại nó sẽ chỉ chứa một trang tĩnh đơn giản, giống như trang đầu tiên của chúng tôiindex.jsthành phần:

Sau khi lưu tệp mới,npm run devquá trình đang chạy đã có khả năng hiển thị trang mà không cần phải khởi động lại trang.

Khi chúng tôi nhấn vào URLhttp: // localhost: 3000 / blogchúng tôi có trang mới:

và đây là những gì thiết bị đầu cuối nói với chúng tôi:

Bây giờ thực tế là URL/blogchỉ phụ thuộc vào tên tệp và vị trí của nó trongpagesthư mục.

Bạn có thể tạo mộtpages/hey/hovà trang đó sẽ hiển thị trên URLhttp: // localhost: 3000 / hey / ho.

Đối với mục đích URL, điều không quan trọng là tên thành phần bên trong tệp.

Hãy thử vào và xem nguồn của trang, khi tải từ máy chủ, nó sẽ liệt kê/_next/static/development/pages/blog.jslà một trong những gói được tải, và không phải/_next/static/development/pages/index.jsnhư trong trang chủ. Điều này là do nhờ phân tách mã tự động, chúng tôi không cần gói cung cấp trang chủ. Chỉ là gói phục vụ trang blog.

Chúng tôi cũng có thể chỉ xuất một hàm ẩn danh từblog.js:

export default () => (
  <div>
    <h1>Blog</h1>
  </div>
)

hoặc nếu bạn thích cú pháp hàm không mũi tên:

export default function() {
  return (
    <div>
      <h1>Blog</h1>
    </div>
  )
}

Bây giờ chúng ta có 2 trang, được xác định bởiindex.jsblog.js, chúng tôi có thể giới thiệu các liên kết.

Các liên kết HTML thông thường trong các trang được thực hiện bằng cách sử dụnganhãn:

<a href="/blog">Blog</a>

Chúng tôi không thể làm điều đó trong Next.js.

Tại sao? Chúng tôi về mặt kỹ thuậtcó thể, tất nhiên, vì đây là Web vàtrên Web mọi thứ không bao giờ hỏng(đó là lý do tại sao chúng ta vẫn có thể sử dụng<marquee>nhãn. Nhưng một trong những lợi ích chính của việc sử dụng Next là khi một trang được tải, quá trình chuyển đổi sang trang khác diễn ra rất nhanh nhờ kết xuất phía máy khách.

Nếu bạn sử dụng đồng bằngaliên kết:

const Index = () => (
  <div>
    <h1>Home page</h1>
    <a href='/blog'>Blog</a>
  </div>
)

export default Index

Bây giờ hãy mởNhững công cụ của nhà phát triển, vàBảng điều khiển mạngđặc biệt. Lần đầu tiên chúng tôi tảihttp://localhost:3000/chúng tôi tải tất cả các gói trang:

Bây giờ nếu bạn nhấp vào nút “Lưu giữ nhật ký” (để tránh xóa bảng Mạng) và nhấp vào liên kết “Blog”, đây là những gì sẽ xảy ra:

Một lần nữa, chúng tôi nhận được tất cả JavaScript đó từ máy chủ! Nhưng .. chúng ta không cần tất cả JavaScript đó nếu chúng ta đã có nó. Chúng tôi chỉ cầnblog.jsgói trang, gói duy nhất mới đối với trang.

Để khắc phục sự cố này, chúng tôi sử dụng một thành phần do Next cung cấp, được gọi là Liên kết.

Chúng tôi nhập nó:

import Link from 'next/link'

và sau đó chúng tôi sử dụng nó để bao bọc liên kết của chúng tôi, như thế này:

import Link from 'next/link'

const Index = () => ( <div> <h1>Home page</h1> <Link href=’/blog’> <a>Blog</a> </Link> </div> )

export default Index

Bây giờ nếu bạn thử lại điều chúng tôi đã làm trước đây, bạn sẽ có thể thấy rằng chỉblog.jsgói được tải khi chúng tôi chuyển đến trang blog:

và trang được tải nhanh hơn trước, con quay thông thường của trình duyệt trên tab thậm chí còn không xuất hiện. Tuy nhiên, URL đã thay đổi, như bạn có thể thấy. Điều này hoạt động trơn tru với trình duyệtAPI lịch sử.

Đây là hoạt động hiển thị phía máy khách.

Nếu bây giờ bạn nhấn nút quay lại thì sao? Không có gì đang được tải, bởi vì trình duyệt vẫn cóindex.jsgói tại chỗ, sẵn sàng để tải/indexlộ trình. Tất cả đều tự động!

Đây không phải là cách duy nhất để xử lý liên kết trong Next.js, nhưng tôi nghĩ đó là cách đơn giản nhất.

Tải xuống miễn phí của tôiSổ tay Next.js


Thêm các bài hướng dẫn tiếp theo: