メインコンテンツまでスキップ

<Link>

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

app/page.tsx
import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Props​

Link コンポーネントで使用できる Props：

Prop例型必須
hrefhref="/dashboardString または Object✔️
replacereplace={false}Boolean-️
scrollscroll={false}Boolean-
prefetchprefetch={false}Boolean-️

Good to know: classNameやtarget="_blank"のような<a>タグの属性は、<Link>に props として追加することができ、基礎となる<a>要素に渡されます。

href（必須）​

遷移する先のパスまたは URL。

<Link href="/dashboard">Dashboard</Link>

hrefはオブジェクトも受け付けます、例えば：

// /about?name=test に遷移する
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  About
</Link>

replace​

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

app/page.tsx
import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      Dashboard
    </Link>
  )
}

scroll​

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

app/page.tsx
import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      Dashboard
    </Link>
  )
}

prefetch​

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

prefetch={false}を渡すことで、プリフェッチを無効にできます。プリフェッチはプロダクションでのみ有効です。

app/page.tsx
import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      Dashboard
    </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>
  )
}

Middleware​

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

たとえば、/dashboardルートに認証済みユーザーとゲスト向けのビューがある場合、Middleware に次のようなコードを追加して、ユーザーを正しいページにリダイレクトできます：

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))
    }
  }
}
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}>
      Dashboard
    </Link>
  )
}

バージョン履歴​

VersionChanges
v13.0.0子<a>タグが不要になりました。コードベースを自動的に更新するためのcodemodが提供されます
v10.0.0動的なルートを指すhref prop は自動的に解決され、as prop は必要なくなりました
v8.0.0プリフェッチのパフォーマンスが向上されました
v1.0.0next/link 導入