Lang x Lang

︙

<Link>

Examples

<Link>は、React component であり、HTML の<a>要素を拡張し prefetching と Client サイドの routes 間のナビゲーションを提供します。これは Next.js で routes 間を移動する主要な方法です。

例として、以下のファイルを持つpagesディレクトリを考えてみてください：

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

これらの各ページに link を以下のように設定することができます：

import Link from "next/link";

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  );
}

export default Home;

Props

ここに Link Component の利用可能な props の要約があります：

Prop例Type必須
hrefhref="/dashboard"String または Object必須
replacereplace={false}Boolean-
scrollscroll={false}Boolean-
prefetchprefetch={false}Boolean-

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

href(必須)

ナビゲートするための URL または path。

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

hrefはまた、object を受け入れることもできます、例えば：

// Navigate to /about?name=test
<Link
  href={{
    pathname: "/about",
    query: { name: "test" },
  }}
>
  About
</Link>

replace

default は false です。 true の場合、next/linkは、新しい URL を ブラウザの履歴 stack に追加する代わりに、現在の履歴の状態を 置き換えます。

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

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      Dashboard
    </Link>
  )
}
app/page.js
import Link from 'next/link'

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

scroll

default は true です。 <Link>の default の挙動は、新しい route のトップに scroll するか、バックワードとフォワードのナビゲーションのために scroll ポジションを維持することです。falseの場合、next/link はナビゲーション後にページのトップに scroll しません 。

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

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      Dashboard
    </Link>
  )
}
app/page.js
import Link from 'next/link'

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

prefetch

<Link /> component がユーザーの viewport に入ると(初期化または scroll により)、 Next.js はリンクされた route (hrefによって表示)とデータをバックグラウンドでプリフェッチおよびロードし、client 側のナビゲーションのパフォーマンスを向上させます。プリフェッチは production でのみ有効になります。

  • true( default )：完全な route およびそのデータがプリフェッチされます。
  • false： viewport に入るときにはプリフェッチは行われませんが、ホバーしたときには行われます。ホバー時のフェッチも完全に無効にしたい場合は、<a>タグを使用するか、徐々に導入することでホバー時のプリフェッチも無効にできる App Router を検討してみてください。
pages/index.tsx
import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      Dashboard
    </Link>
  )
}
pages/index.js
import Link from 'next/link'

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

Other Props

legacyBehavior

<a>要素は、<Link>の子として必要なくなりました。legacyBehaviorのプロパティを追加して旧来の動作を使用するか、<a>を削除してアップグレードします。あなたの code を自動的にアップグレードするための codemod が利用可能です。

Good to know: legacyBehaviorがtrueに設定されていない場合、すべての anchor タグのプロパティは、className、onClickなどと共にnext/linkにも渡すことができます。

passHref

Linkに強制的にその子にhrefプロパティを送信させます。default はfalseです。

scroll

Scroll をナビゲーション後にページの最上部に移動します。default はtrueです。

shallow

現在のページの path を更新し、getStaticProps、getServerSideProps、getInitialProps を再実行せずに更新します。default はfalseです。

locale

アクティブな locale は自動的に前置されます。localeは異なる locale を提供することを可能にします。 falseの場合、hrefは locale を含める必要があります。なぜなら、 default の振る舞いが無効になるからです。

Examples

Dynamic Routes へのリンク作成

dynamic routes については、template リテラルを使用してリンクの path を作成すると便利です。

例えば、pages/blog/[slug].jsという dynamic route へのリンクリストを生成することができます。

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> タグをラップするカスタムの component であるならば

Linkの子供が<a>タグをラップするカスタムの component である場合、LinkにpassHrefを追加する必要があります。これは、styled-components のようなライブラリを使用している場合に必要です。これがないと、<a>タグにはhref属性がなく、あなたのサイトのアクセシビリティが悪化し、SEO に影響を与える可能性があります。ESLint を使っている場合、next/link-passhrefというビルトインルールがあるので、passHrefの正しい使用法を確認することができます。

import Link from "next/link";
import styled from "styled-components";

// This creates a custom component that wraps an <a> tag
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 pragma 機能(@jsx jsx)を使用している場合、 <a> タグを直接使用する場合でも passHref を使用する必要があります。
  • component は、ナビゲーションを正しくトリガーするためにonClickプロパティをサポートする必要があります

もし子供が機能的な component である場合

Linkの子が機能的な component である場合、passHrefとlegacyBehaviorを使用することに加えて、その component を React.forwardRef でラップする必要があります：

import Link from "next/link";

// `onClick`, `href`, and `ref` need to be passed to the DOM element
// for proper handling
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 legacyBehavior>
      <MyButton />
    </Link>
  );
}

export default Home;

URL Object と共に

Linkはまた、URL object を受け取ることもでき、それを自動的にフォーマットして URL string を作成します。それのやり方は次の通りです：

import Link from "next/link";

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

export default Home;

上記の例には link へのリンクがあります：

  • 事前に定義された route：/about?name=test
  • dynamic route: /blog/my-post

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

Replace を使って URL をプッシュする代わりに置き換えてください

Link component の default の動作は、新しい URL をhistory stack にpushすることです。以下の例のように、新しいエントリの追加を防ぐためにreplaceプロップを使用することができます。

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

ページのトップへの Scroll を無効にする

Linkの default の動作はページのトップへ scroll することです。ハッシュが定義されている場合、通常の<a>タグのように、特定の id へ scroll します。トップやハッシュへの scroll を防ぐためには、scroll={false}をLinkに追加することができます:

<Link href="/#hashid" scroll={false}>
  Disables scrolling to the top
</Link>

Middleware

認証やユーザーを別のページに rewrites するその他の目的で middleware を使用することは一般的です。 <Link /> component が rewrites を介してリンクを適切に prefetch するためには、Next.js に対して display する URL と、prefetch するための URL の両方を伝える必要があります。これは、正しい route を prefetch するために middleware に対して不要なフェッチを回避するために必要となります。

例えば、認証済みと訪問者のビューを持つ/dashboard route を提供したい場合、ユーザーを正しいページに redirect するために、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))
    }
  }
}

この場合、あなたは以下の code をあなたの<Link /> component に使用したいでしょう:

import Link from "next/link";
import useIsAuthed from "./hooks/useIsAuthed";

export default function Page() {
  const isAuthed = useIsAuthed();
  const path = isAuthed ? "/auth/dashboard" : "/public/dashboard";
  return (
    <Link as="/dashboard" href={path}>
      Dashboard
    </Link>
  );
}

Good to know: もし Dynamic Routes を使用しているなら、as と href props を調整する必要があります。例えば、/dashboard/authed/[user] のような"Dynamic Route"があり、それを"middleware" を通じて異なる形で表示したいときは、次のように記述します: <Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">Profile</Link>.

Version History

VersionChanges
v13.0.0子の<a>タグが必要なくなりました。codemod が提供されており、あなたの Code ベースを自動的に更新します。
v10.0.0href props は自動的に解決され、 dynamic route への指示はもはやasプロパティを require する必要はありません。
v8.0.0プリフェッチのパフォーマンスが向上しました。
v1.0.0next/link 導入されました。

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use