<Link> コンポーネント

TL;DR

next/link が提供するコンポーネント。<a> と同じように href 属性に遷移先の URL を指定する。DOM 上では <a> 要素として展開されるが、クリックすると Soft navigation が起きる。

仕組み

公式ドキュメントによると、<Link> は <a> 要素を拡張し、プリフェッチとクライアントサイドでのルート間の移動を提供する。Next.js でルート間を移動する主な方法である。

<Link> がビューポートに入ると、Next.js はリンク先のルートとそのデータを裏で読み込む（プリフェッチ）。プリフェッチは本番環境でだけ有効になる。prefetch の既定値（"auto" または null）では、静的なルートは全体を、動的なルートは最も近い loading.js の境界までをプリフェッチする。false にするとプリフェッチしない。

ほかに、履歴を追加せずに置き換える replace、移動後のスクロールを制御する scroll などの props がある。className のような <a> の属性は、そのまま <a> 要素に渡される。

例

import Link from "next/link"
import styles from "./styles.module.css"
 
export function Nav() {
  return (
    <nav className={styles.nav}>
      <ul>
        <li>
          <Link href="/">トップ</Link>
        </li>
        <li>
          <Link href="/categories">カテゴリー一覧</Link>
        </li>
      </ul>
    </nav>
  )
}

Dynamic Routes へのリンクは次のように書ける。

export default function Page() {
  return (
    <div>
      <h1>カテゴリー一覧画面</h1>
      <ul>
        <li>
          <Link href="/categories/flower">花</Link>
        </li>
        <li>
          <Link href="/categories/animal">動物</Link>
        </li>
        <li>
          <Link href="/categories/landscape">風景</Link>
        </li>
      </ul>
    </div>
  )
}

このとき、遷移先の Dynamic Routes は次のように定義されている。

type Props = {
  // パスパラメータ
  params: { categoryName: string }
  // クエリパラメータ
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export default function Page({ params, searchParams }: Props) {
  const page = typeof searchParams.page === "string" ? searchParams.page : "1"
 
  return (
    <div>
      <h1>カテゴリー別一覧画面</h1>
      <h2>カテゴリー「{params.categoryName}」</h2>
      <p>ページ番号:「{page}」</p>
    </div>
  )
}

注意点

以前のバージョンでは、子要素として <a> を置く必要があったが、今は不要である。公式ドキュメントによると、v13.0.0 から不要になった。

関連

• useRouter Hook: <Link> を使わずに画面遷移させる Hook
• Soft navigation
• クエリパラメータ

出典

• Components: Link - Next.js