<Link>

例

<Link>は、HTMLの<a>要素を拡張したReactコンポーネントで、プリフェッチとクライアントサイドのルート間ナビゲーションを提供します。Next.jsでルート間を移動する主要な方法です。

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">ダッシュボード</Link>
}

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">ダッシュボード</Link>
}

プロパティ

Linkコンポーネントで利用可能なプロパティの概要:

プロパティ	例	タイプ	必須
`href`	`href="/dashboard"`	文字列またはオブジェクト	はい
`replace`	`replace={false}`	ブーリアン	-
`scroll`	`scroll={false}`	ブーリアン	-
`prefetch`	`prefetch={false}`	ブーリアン	-

豆知識: classNameやtarget="_blank"などの<a>タグ属性は、<Link>にプロパティとして追加でき、基盤の<a>要素に渡されます。

`href` (必須)

移動先のパスまたはURL。

<Link href="/dashboard">ダッシュボード</Link>

hrefはオブジェクトも受け入れます:

// /about?name=test に移動
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  会社概要
</Link>

`replace`

デフォルトはfalse。 trueの場合、next/linkは新しいURLをブラウザの履歴スタックに追加する代わりに、現在の履歴状態を置き換えます。

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      ダッシュボード
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      ダッシュボード
    </Link>
  )
}

`scroll`

デフォルトはtrue。 <Link>のデフォルト動作は、新しいルートの先頭にスクロールするか、前後のナビゲーションでスクロール位置を維持することです。falseの場合、next/linkはナビゲーション後にページの先頭にスクロールしません。

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      ダッシュボード
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      ダッシュボード
    </Link>
  )
}

`prefetch`

デフォルトはtrue。 trueの場合、next/linkはhrefで示されたページをバックグラウンドでプリフェッチします。これはクライアントサイドナビゲーションのパフォーマンス向上に役立ちます。ビューポート内の<Link />（初期状態またはスクロールによる）はプリロードされます。

prefetch={false}を渡すことでプリフェッチを無効にできます。プリフェッチは本番環境でのみ有効です。

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      ダッシュボード
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      ダッシュボード
    </Link>
  )
}

例

動的ルートへのリンク

動的ルートの場合、テンプレートリテラルを使用してリンクのパスを作成すると便利です。

例えば、動的ルートapp/blog/[slug]/page.jsへのリンクリストを生成できます:

app/blog/page.js

import Link from 'next/link'

function Page({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

ミドルウェア

ミドルウェアは、ユーザーを別のページにリライトする認証やその他の目的でよく使用されます。ミドルウェア経由のリライトを含むリンクを<Link />コンポーネントが適切にプリフェッチするためには、Next.jsに表示するURLとプリフェッチするURLの両方を伝える必要があります。これは、プリフェッチする正しいルートを知るためにミドルウェアへの不要なフェッチを避けるために必要です。

例えば、認証済みビューと訪問者ビューを持つ/dashboardルートを提供したい場合、ミドルウェアに次のようなものを追加してユーザーを正しいページにリダイレクトできます:

middleware.js

export function middleware(req) {
  const nextUrl = req.nextUrl
  if (nextUrl.pathname === '/dashboard') {
    if (req.cookies.authToken) {
      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
    } else {
      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
    }
  }
}

この場合、<Link />コンポーネントで次のコードを使用します:

import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
  const isAuthed = useIsAuthed()
  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
  return (
    <Link as="/dashboard" href={path}>
      ダッシュボード
    </Link>
  )
}

バージョン履歴

バージョン	変更点
`v13.0.0`	子要素の`<a>`タグが不要になりました。コードモッドが提供され、コードベースを自動的に更新します。
`v10.0.0`	動的ルートを指す`href`プロパティは自動的に解決され、`as`プロパティが不要になりました。
`v8.0.0`	プリフェッチのパフォーマンスが改善されました。
`v1.0.0`	`next/link`が導入されました。

On this page