頁面跳轉

Link 組件

在網站上的頁面之間鏈接時，您可以使用 <a> HTML 標記。

在 Next.js 中，您可以使用 Link 組件 next/link 來鏈接應用程式中的頁面。

Link 允許您進行客戶端跳轉頁面並可使用props來更好地控制頁面跳轉行為 

使用 <Link>

首先, 打開pages/index.js, 並在最上面加入以下程式來從next/link引用Link組件

import Link from 'next/link';

然後找到帶有h1標籤的程式碼如下: 

<h1 className="title">
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

然後將他改成:

<h1 className="title">
  Read <Link href="/posts/first-post">this page!</Link>
</h1>

接著, 打開pages/posts/first-post.js 並用以下程式碼取代原本的程式碼:

import Link from 'next/link';

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

如你所見, Link 組件類似於使用<a>標籤, 但是您使用 <Link href="…"> 而不是<a href="…">

Note:注意：在 Next.js 12.2 之前，要求 Link 組件包裹 <a> 標籤，但在 12.2 及以上版本中不需要。

讓我們看看它是否有效。您現在應該在每個頁面上都有一個鏈接，允許您來回切換：

返回上一頁 ← 前往下一頁 →