サンプルコードで身につける: Link — ページ間の移動

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1最小の Link

Link の一番基本的な形で、href に移動先のパスを渡すだけです。見た目も書き味も a タグとほぼ同じですが、ページ全体のリロードなしで移動できる点だけが違います。

import Link from "next/link";

export default function HomePage() {
  return (
    <main>
      <h1>ホーム</h1>
      <Link href="/about">会社概要を見る</Link>
    </main>
  );
}
// a タグとの違いはこの1点:
// ページ全体を読み込み直さず、必要な部分だけ差し替えて移動する。

2ナビゲーションバーを作る

Link を並べてサイト内の主要ページへの導線を作る、最も出番の多い使い方です。画面に表示された Link は移動先が自動で先読みされるので、ナビからの移動は体感ほぼ一瞬になります。

import Link from "next/link";

export default function GlobalNav() {
  return (
    <nav>
      <Link href="/">ホーム</Link>
      <Link href="/products">商品一覧</Link>
      <Link href="/news">お知らせ</Link>
      <Link href="/contact">お問い合わせ</Link>
    </nav>
  );
}
// 画面に見えている Link は移動先を裏で先読みしてくれる。

3内部は Link・外部は a タグ

リンク先がサイト内か外部かで使い分ける基準を、1つのコンポーネントの中で対比した例です。サイト内に a タグを使うとリロードが発生して遅くなる、というレッスン本文の注意点がコードの形で分かります。

import Link from "next/link";

export default function SiteFooter() {
  return (
    <footer>
      {/* サイト内 → Link(リロードなしで速い) */}
      <Link href="/privacy">プライバシーポリシー</Link>
      <Link href="/terms">利用規約</Link>

      {/* 外部サイト → 普通の a タグでよい */}
      <a href="https://twitter.com/mysite">公式 X</a>
      <a href="https://github.com/mysite">GitHub</a>
    </footer>
  );
}

4内部リンクかどうかを判定してみる

「/ で始まるパスはサイト内、http で始まる URL は外部」という使い分けの基準を、判定関数として実行できる形にした例です。実務でも CMS から来たリンク一覧を Link と a に振り分けるときに、この判定がそのまま登場します。

TypeScript

// 「サイト内は Link、外部は a タグ」の判定基準を関数にする
function isInternalLink(href: string): boolean {
  return href.startsWith("/"); // "/" 始まりは自サイト内のパス
}

const hrefs = [
  "/about",
  "/blog/news",
  "https://example.com",
  "/contact",
  "https://github.com/vercel/next.js",
];

for (const href of hrefs) {
  const tag = isInternalLink(href) ? "Link を使う" : "a タグを使う";
  console.log(href + " → " + tag);
}

5レイアウトにグローバルナビを組み込む

前のレッスンの layout.tsx と Link を組み合わせ、全ページ共通のナビゲーションを完成させる実務的な例です。共通の枠はレイアウトに、移動は Link に、と役割を分担するのが Next.js のサイトの基本骨格になります。

// app/layout.tsx — 全ページにナビ付きヘッダーを共有
import Link from "next/link";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <header>
          <Link href="/">ホーム</Link>
          <Link href="/products">商品一覧</Link>
          <Link href="/cart">カート</Link>
        </header>
        {children}
      </body>
    </html>
  );
}