Lang x Lang

︙

<Link>

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

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

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

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

Props

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

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

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 は、client サイドのナビゲーションのパフォーマンスを向上させるために、リンク先の route (hrefで示される)とそのデータをバックグラウンドでプリフェッチおよびロードします。プリフェッチは production でのみ有効になります。

  • null(default): Prefetch の振る舞いは、その route が静的か動的かによります。静的な routes の場合、完全な route が事前にフェッチされます(そのすべてのデータを含む)。 dynamic routes の場合、最も近いセグメントへの部分的な route が事前にフェッチされます.そのセグメントは、loading.js の境界を持っています。
  • true:全ての route は、静的であろうと dynamic routes であろうと事前にフェッチされます。
  • false: プリフェッチは、''viewport''に入るときとホバーするときの両方で、''決して''行われません。
app/page.tsx
import Link from 'next/link'

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

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

Examples

Dynamic Routes へのリンク作成

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

例えば、dynamic route 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>
  )
}

もし子供が <a> タグをラップするカスタムの component であるならば

Linkの子要素が<a>タグをラップするカスタムの component である場合、LinkにpassHrefを追加する必要があります。これは styled-components のようなライブラリを使用している場合に必要です。これがないと、<a>タグにはhref属性がなくなり、あなたのサイトのアクセシビリティが損なわれ、SEO に影響を及ぼすかもしれません。もし、ESLint を使用している場合は、passHrefの正しい使用を保証するための組み込みルールnext/link-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>
  );
}

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