🚀

【Next.js和訳】API Reference/ next/link

2021/10/02に公開約6,500字

この記事について

この記事は、next/linkの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

next/link

例 | Examples

クライアントサイドでのルート間の遷移は、next/linkでエクスポートされるLinkコンポーネントで実現できます。

例えば、次のようなファイルがあるpagesディレクトリを考えてみましょう。

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

これらの各ページには、次のようなリンクを設定することができます。

import Link from "next/link"
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}
export default Home

Link は次のようなプロップを受け付けます。

  • href - 遷移先のパスまたは URL です。これは唯一の必須プロップです。
  • as - オプションで、ブラウザの URL バーに表示されるパスのデコレーターです。Next.js 9.5.3 より前のバージョンでは、これはダイナミックルートに使用されていましたが、その仕組みについては以前のドキュメントをご覧ください。
  • passHref - Linkhref プロパティを子プロセスに送信します。デフォルトは false です。
  • prefetch - バックグラウンドでページをプリフェッチします。デフォルトは true です。ビューポート内にあるすべての <Link /> (初期状態またはスクロールによる)は、プリロードされます。prefetch={false}を渡すことで、プリフェッチを無効にすることができます。prefetchfalse に設定された場合でも、プリフェッチはホバー時に行われます。静的生成を使用しているページでは、ページ遷移を高速化するために、データを含む JSON ファイルをプリロードします。プリフェッチは本番環境でのみ有効です。
  • replace - スタックに新しい url を追加する代わりに、現在の history の状態を置き換えます。デフォルトは false です。
  • scroll - ナビゲーションの後、ページのトップにスクロールします。デフォルトは true です。
  • shallow - getStaticProps, getServerSideProps, getInitialProps を再実行することなく、現在のページのパスを更新します。デフォルトは false です。
  • locale - アクティブなロケールが自動的に前置されます。locale は異なるロケールを提供することができます。false の場合、href はデフォルトの動作が無効になるので、ロケールを含める必要があります。

ルートにダイナミックセグメントがある場合 | If the route has dynamic segments

Next.js 9.5.3 以降では、キャッチオールルートを含むダイナミックルートにリンクする際に、何もすることがありません(それ以前のバージョンについては、以前のドキュメントをご確認ください)。

しかし、補間URL オブジェクトを使ってリンクを生成するのは、非常に一般的で便利な方法です。

例えば、ダイナミックルートのpages/blog/[slug].jsは、以下のようなリンクにマッチします。

import Link from "next/link"
function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}
export default Posts

子要素が<a>タグをラップするカスタムコンポーネントの場合 | If the child is a custom component that wraps an <a> tag

Link の子要素が <a> タグをラップするカスタムコンポーネントの場合、LinkpassHref を追加する必要があります。

これは、styled-componentsのようなライブラリを使用している場合に必要です。

これをしないと、<a>タグはhref属性を持たないので、サイトの SEO に悪影響を及ぼす可能性があります。

import Link from "next/link"
import styled from "styled-components"
// これは、<a>タグをラップするカスタムコンポーネントを作成します。
const RedLink = styled.a`
  color: red;
`
function NavLink({ href, name }) {
  // リンクにpassHrefを追加する必要があります。
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  )
}
export default NavLink

emotionの JSX プラグマ機能(@jsx jsx)を使用している場合は、<a>タグを直接使用している場合でも、passHrefを使用する必要があります。

ナビゲーションを正しく起動するには、コンポーネントが onClick プロパティをサポートしている必要があります。

子要素が関数コンポーネントの場合 | If the child is a function component

Linkの子が関数コンポーネントの場合は、passHrefを使うことに加えて、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}>
      Click Me
    </a>
  )
})
function Home() {
  return (
    <Link href="/about" passHref>
      <MyButton />
    </Link>
  )
}
export default Home

URL オブジェクトの場合 | With URL Object

Link は URL オブジェクトを受け取ることもでき、それを自動的にフォーマットして URL 文字列を作成します。その方法は以下の通りです。

import Link from "next/link"
function Home() {
  return (
    <ul>
      <li>
        <Link
          href={{
            pathname: "/about",
            query: { name: "test" },
          }}
        >
          <a>About us</a>
        </Link>
      </li>
      <li>
        <Link
          href={{
            pathname: "/blog/[slug]",
            query: { slug: "my-post" },
          }}
        >
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}
export default Home

上記の例では、リンク先が

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

プッシュの代わりに URL を置換する | Replace the URL instead of push

Linkコンポーネントのデフォルトの動作は、新しい URL を history のスタックに push することです。

次の例のように、replace プロパティーを使って、新しいエントリーを追加しないようにすることができます。

<Link href="/about" replace>
  <a>About us</a>
</Link>

ページの先頭へのスクロールを無効にする | Disable scrolling to the top of the page

Linkのデフォルトの動作は、ページの一番上までスクロールします。

ハッシュが定義されている場合は、通常の <a> タグのように、特定の ID にスクロールします。

トップ/ハッシュにスクロールしないようにするには scroll={false}Link に追加します。

<Link href="/?counter=10" scroll={false}>
  <a>Disables scrolling to the top</a>
</Link>

Discussion

ログインするとコメントできます