はじめに

Next.js で画面遷移を実装しようとしたとき、多くの人が最初に疑問に思うのが「なぜ <a> タグではなく <Link> を使うのか」という点です。HTML ではリンクといえば <a> タグが基本ですが、Next.js では公式ドキュメントでも <Link> コンポーネントの使用が推奨されています。

この記事では、プログラミング初学者の方でも理解できるように、<Link> によるナビゲーションの仕組みを説明します。単に使い方を覚えるだけでなく、「なぜ必要なのか」「これがないと何に困るのか」という背景も含めて解説していきます。

参考にしたリンク

• https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
• https://nextjs.org/docs/api-reference/components/link
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/a

<Link> によるナビゲーションの概要

<Link> とは、Next.js が提供している「ページ遷移専用のコンポーネント」です。見た目は HTML のリンクとほとんど変わりませんが、内部の動きが大きく異なります。一言で言うなら、「ページを再読み込みせずに画面遷移を行うための仕組み」です。

ブラウザの標準機能である <a> タグは、リンクをクリックするとページ全体を再読み込みします。一方で <Link> は、必要な情報だけを取得して画面を切り替えるため、より高速で快適な操作感を実現できます。

Next.js におけるナビゲーションの考え方

Next.js は「ページ全体を切り替える」のではなく、「必要な部分だけを更新する」という考え方を採用しています。そのため、リンクによる画面遷移も、単なる HTML の移動ではなく、アプリケーションとしての遷移になります。<Link> は、この仕組みを支える非常に重要な存在です。

なぜ <a> ではなく <Link> を使うのか

<a> タグの仕組み

まず、<a> タグがどのように動くのかを理解しておきましょう。

<a> タグをクリックすると、ブラウザは次の処理を行います。

1. 現在のページを破棄する
2. 新しい URL にリクエストを送る
3. HTML、CSS、JavaScript を再度読み込む

この動きは、シンプルで分かりやすい反面、アプリケーションとしては無駄が多いという欠点があります。

<Link> を使う理由

<Link> を使う理由を一言で表すなら、「無駄な再読み込みを避けるため」です。

Next.js では、ページ遷移に必要な JavaScript やデータだけを取得し、既に読み込まれている部分はそのまま使います。そのため、画面遷移が非常に速く、ユーザー体験が向上します。

もし <Link> を使わずにすべて <a> タグで実装した場合、次のような問題が起こります。

• 画面遷移のたびに表示が一瞬白くなる
• 状態が毎回リセットされる
• アプリとしての一体感が失われる

これらを防ぐために、Next.js では <Link> が必要になります。

<a> タグはもう不要なのか

結論から言うと、<a> タグが不要になるわけではありません。使い分けが重要です。Next.js の <Link> は、「アプリ内のページ遷移」を前提としています。

一方で、次のような場合には <a> タグが適しています。

• 外部サイトへのリンク
• ファイルのダウンロード
• Next.js 管理外の URL への遷移

つまり、「Next.js のページ同士を移動するときは <Link>」「それ以外は <a>」と覚えると分かりやすいです。

<Link> と <a> の関係

実は <Link> の内部では、最終的に <a> タグが使われています。ただし、Next.js が間に入ることで、ナビゲーションの制御や最適化が行われています。そのため、「<Link> は <a> の上位版」と考えて問題ありません。

<Link> の基本的な使い方

最もシンプルな例

<Link> の基本的な使い方は非常にシンプルです。

import Link from "next/link";

export default function Home() {
  return (
    <Link href="/about">
      About ページへ
    </Link>
  );
}

このコードでは、/about ページへのリンクを作成しています。クリックしてもページ全体は再読み込みされず、必要な部分だけが更新されます。

内部で何が起きているのか

この <Link> をクリックすると、Next.js は次のような流れで処理を行います。

1. 遷移先のページ情報を取得する
2. 必要な JavaScript を読み込む
3. 画面を切り替える

この一連の処理は、ユーザーにはほとんど意識されません。そのため、非常にスムーズな画面遷移が実現されます。

ナビゲーションの流れを理解する

ページ遷移時の内部処理

Next.js のナビゲーションは、単なる URL の移動ではありません。

アプリケーションとして、次のような考え方で動いています。

• ルーティング情報をもとに表示するコンポーネントを切り替える
• サーバーコンポーネントが必要な場合はサーバーで処理する
• クライアントコンポーネントは状態を保ったまま動作する

この仕組みがあるからこそ、「画面は切り替わるのに、アプリは続いている」という感覚が生まれます。

サーバーコンポーネントとの関係

App Router を使っている場合、<Link> による遷移では、必要に応じてサーバーコンポーネントが再実行されます。ただし、すべてが再読み込みされるわけではなく、差分だけが更新されます。これにより、表示速度と柔軟性の両立が可能になります。

Prefetch とは何か

Prefetch とは、「ユーザーがクリックする前に、遷移先の情報を先読みする仕組み」です。一言で言うなら、「未来の操作を先回りして準備する機能」です。Next.js の <Link> は、デフォルトで Prefetch を行います。画面内に表示されたリンクの遷移先を、裏側で少しずつ読み込んでいます。

なぜ Prefetch が必要なのか

Prefetch がない場合、リンクをクリックしてから初めてデータの取得が始まります。そのため、どうしても待ち時間が発生します。

Prefetch があることで、次のようなメリットがあります。

• クリックした瞬間に画面が切り替わる
• 通信待ちのストレスが減る
• アプリ全体が軽く感じられる

ユーザー体験を向上させるために、Prefetch は非常に重要な役割を担っています。

Prefetch の挙動と注意点

Prefetch は、すべてのリンクで無制限に行われるわけではありません。画面内に表示されているリンクや、ユーザーが近づいたリンクが対象になります。また、不要な Prefetch を避けたい場合は、明示的に無効化することも可能です。

<Link href="/about" prefetch={false}>
  About ページへ
</Link>

この指定を行うことで、遷移先の先読みを行わなくなります。

具体例で理解する <Link> の使い分け

よくある使用場面

• サイト内ページの移動
• 記事一覧から記事詳細への遷移
• ナビゲーションメニュー

<a> を使う場面

• 外部サイトへのリンク
• PDF や画像ファイルのダウンロード

まとめ

• <Link> は Next.js 専用のナビゲーションコンポーネントです。
• ページ全体を再読み込みせずに画面遷移ができます。
• <a> タグが不要になるわけではなく、用途に応じた使い分けが重要です。
• Prefetch によって、クリック前から遷移先が準備されます。
• 快適なユーザー体験を作るために <Link> は欠かせない存在です。

<Link> の仕組みを理解すると、Next.js が「ただの Web サイト」ではなく「アプリケーション」であることが実感できるようになります。

ぜひ、自分のブログやアプリの中で積極的に使ってみてください。