Next.jsでサイト制作を始めると、必ずと言っていいほど目にするimport Link from "next/link";という記述があります。
「なぜ使い慣れた<a>タグではなく、専用のコンポーネントを使うの？」と疑問に感じたことはありませんか？
実は、このLinkタグこそがNext.jsの高速なユーザー体験を支える核となる要素です。
本記事では、通常の<a>タグとの決定的な違いや、Linkタグを使うメリットについて解説しています。
「いつ、どのように使い分けるべきか」といった実践的なポイントも整理しているので、Next.jsの基本をマスターしたい方はぜひ参考にしてください。
Linkタグを使う理由
Next.jsでaタグを使わずにLinkタグを使う最大の理由は、「ページ全体のリロードを防ぎ、高速で遷移させるため」です。
URL書き換えと差分データの読み込み
通常の<a>タグを使うと、ブラウザは新しいページを読み込むために画面全体を真っ白にしてリロードします。
一方、<Link>タグを使うと、JavaScriptがブラウザのURLだけを書き換え、必要な差分データだけを読み込んで表示を切り替えます。
これにより、アプリのような滑らかな移動が可能になります。
データのプリフェッチ（Pre-fetching）
<Link>タグがブラウザの画面内（ビューポート）に入ると、Next.jsはバックグラウンドで移動先のページのデータをあらかじめ読み込み始めます。
ユーザーが実際にリンクをクリックしたときには、すでにデータが手元にある状態なので、一瞬でページが表示されます。
状態を保存できる
<a>タグでリロードが発生してしまうと、ReactのuseStateなどで管理していたアプリの状態（入力中のフォームデータや、開いているメニューの状態など）がすべてリセットされてしまいます。
<Link>を使えば、リロードが発生しないため、状態を維持したまま遷移できます。
Linkタグを使う/使わない場合
Linkタグをいつでも使えばいいというわけではありません。
Linkタグが機能するのはサイト内のページ遷移です。
外部サイトに遷移するときや、ファイルのダウンロードなど外部の機能を使いたい場合はaタグを使います。
| 種類 | 使うタグ | 理由 |
| サイト内の別ページ | <Link> | 高速遷移とプリフェッチの恩恵を受けるため。 |
| 外部サイト（Google等） | <a> | Next.jsの管理外であり、プリフェッチの必要がないため。 |
| ファイルのダウンロード | <a> | ページ遷移ではなく、ブラウザの標準機能を使いたいため。 |
| ページ内リンク（#top等） | <a> または <Link> | 基本はLinkでOKですが、単純なアンカーなら<a>でも動きます。 |
基本的には「アプリ内の移動」にはすべてLinkを使います。
Linkタグの使い方
Linkタグを使うにはモジュールからLinkをインポートする必要があります。
.jsまたは.tsxファイルの冒頭に以下を記述します。
import Link from "next/link";
リンクを設置したいところでLinkタグを使います。
<Link href="/about">
アバウトページへ
</Link>
