logoNext.js 日本語
ドキュメントブログ学習
はじめに/API リファレンス/コンポーネント/<Link>

<Link>

例

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

例として、以下のファイルを持つpagesディレクトリを考えます:

  • pages/index.js
  • pages/about.js
  • pages/blog/[slug].js

これらのページへのリンクは次のように作成できます:

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">ホーム</Link>
      </li>
      <li>
        <Link href="/about">会社概要</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">ブログ投稿</Link>
      </li>
    </ul>
  )
}

export default Home

プロパティ

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

プロパティ例タイプ必須
hrefhref="/dashboard"文字列またはオブジェクトはい
replacereplace={false}ブーリアン-
scrollscroll={false}ブーリアン-
prefetchprefetch={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>
  )
}

その他のプロパティ

legacyBehavior

<Link>の子要素として<a>要素は不要になりました。レガシー動作を使用するにはlegacyBehaviorプロパティを追加するか、<a>を削除してアップグレードしてください。コードモッドが利用可能で、コードを自動的にアップグレードできます。

豆知識: legacyBehaviorがtrueに設定されていない場合、className、onClickなどすべてのanchorタグプロパティをnext/linkに渡せます。

passHref

Linkにhrefプロパティを子要素に強制的に送信させます。デフォルトはfalse

scroll

ナビゲーション後にページの先頭にスクロールします。デフォルトはtrue

shallow

getStaticProps、getServerSideProps、getInitialPropsを再実行せずに現在のページのパスを更新します。デフォルトはfalse

locale

アクティブなロケールが自動的に付加されます。localeは異なるロケールを提供できます。falseの場合、デフォルト動作が無効になり、hrefにロケールを含める必要があります。

例

動的ルートへのリンク

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

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

pages/blog/index.js
import Link from 'next/link'

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

export default Posts

子要素が<a>タグをラップするカスタムコンポーネントの場合

Linkの子要素が<a>タグをラップするカスタムコンポーネントの場合、LinkにpassHrefを追加する必要があります。これはstyled-componentsなどのライブラリを使用している場合に必要です。これがないと、<a>タグにhref属性がなくなり、サイトのアクセシビリティやSEOに影響を与える可能性があります。ESLintを使用している場合、next/link-passhrefという組み込みルールがあり、passHrefの正しい使用を保証します。

import Link from 'next/link'
import styled from 'styled-components'

// <a>タグをラップするカスタムコンポーネント
const RedLink = styled.a`
  color: red;
`

function NavLink({ href, name }) {
  return (
    <Link href={href} passHref legacyBehavior>
      <RedLink>{name}</RedLink>
    </Link>
  )
}

export default NavLink
  • emotionのJSXプラグマ機能（@jsx jsx）を使用している場合、<a>タグを直接使用してもpassHrefが必要です。
  • コンポーネントはナビゲーションを正しくトリガーするためにonClickプロパティをサポートする必要があります

子要素が関数コンポーネントの場合

Linkの子要素が関数コンポーネントの場合、passHrefとlegacyBehaviorに加えて、コンポーネントをReact.forwardRefでラップする必要があります:

import Link from 'next/link'

// `onClick`、`href`、`ref`はDOM要素に渡す必要がある
const MyButton = React.forwardRef(({ onClick, href }, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref}>
      クリックしてください
    </a>
  )
})

function Home() {
  return (
    <Link href="/about" passHref legacyBehavior>
      <MyButton />
    </Link>
  )
}

export default Home

URLオブジェクトを使用

LinkはURLオブジェクトも受け取り、自動的にURL文字列にフォーマットします。使用方法:

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link
          href={{
            pathname: '/about',
            query: { name: 'test' },
          }}
        >
          会社概要
        </Link>
      </li>
      <li>
        <Link
          href={{
            pathname: '/blog/[slug]',
            query: { slug: 'my-post' },
          }}
        >
          ブログ投稿
        </Link>
      </li>
    </ul>
  )
}

export default Home

上記の例では次のリンクがあります:

Node.js URLモジュールドキュメントで定義されているすべてのプロパティを使用できます。

URLをプッシュせずに置換

Linkコンポーネントのデフォルト動作は、historyスタックに新しいURLをpushすることです。次の例のように、replaceプロパティを使用して新しいエントリの追加を防げます:

<Link href="/about" replace>
  会社概要
</Link>

ページトップへのスクロールを無効化

Linkのデフォルト動作はページの先頭にスクロールすることです。ハッシュが定義されている場合、通常の<a>タグのように特定のidにスクロールします。先頭/ハッシュへのスクロールを防ぐにはscroll={false}をLinkに追加します:

<Link href="/#hashid" scroll={false}>
  トップへのスクロールを無効化
</Link>

ミドルウェア

ミドルウェアは、ユーザーを別のページにリライトする認証やその他の目的でよく使用されます。ミドルウェア経由のリライトを含むリンクを<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>
  )
}

豆知識: 動的ルートを使用している場合、asとhrefプロパティを適応させる必要があります。例えば、ミドルウェア経由で異なる方法で表示したい/dashboard/[user]のような動的ルートがある場合、<Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">プロフィール</Link>と記述します。

バージョン履歴

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

<Image>（レガシー）

レガシー Image コンポーネントによる後方互換性のある画像最適化

<Script>

組み込みの `next/script` コンポーネントを使用して Next.js アプリケーション内のサードパーティスクリプトを最適化