Link 組件

在網站頁面之間建立連結時，通常會使用 <a> HTML 標籤。

在 Next.js 中，您可以使用 next/link 提供的 Link 組件來建立應用程式內的頁面連結。<Link> 允許您進行客戶端導航 (client-side navigation)，並接受 屬性 (props) 來更好地控制導航行為。

使用 <Link>

首先，打開 pages/index.js 檔案，並在頂部加入這行程式碼來從 next/link 導入 Link 組件：

import Link from 'next/link';

然後找到如下所示的 h1 標籤：

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

將其修改為：

<h1 className={styles.title}>
  閱讀 <Link href="/posts/first-post">此頁面！</Link>
</h1>

接著，打開 pages/posts/first-post.js 檔案並將其內容替換為以下程式碼：

import Link from 'next/link';
 
export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">返回首頁</Link>
      </h2>
    </>
  );
}

如您所見，Link 組件的使用方式與 <a> 標籤類似，但您使用的是 <Link href="…"> 而非 <a href="…">。

注意： 在 Next.js 12.2 之前，Link 組件必須包裹一個 <a> 標籤，但 在 12.2 及更高版本中不再需要這樣做。

讓我們檢查它是否正常工作。您現在應該在每個頁面上都有一個連結，可以來回切換：