Next.jsでページ内のリンクを書くとき、<a href="..."> で十分だと思っていないでしょうか。実際、それでもリンクとしては機能しますし、見た目も変わりません。ただ、遷移のたびに損をしていることがあります。

【よくある誤解】
誤解1: <a href> で書けば十分、next/link を使っても使わなくても同じ
誤解2: 見た目が変わらないなら、内部の動きも同じはず

どちらも半分正解で半分誤解です。

【何が起きているか】
<a href="/posts"> はブラウザ標準のページ遷移です。クリックするたびに、ページを丸ごと最初から読み込み直します。HTML・CSS・JavaScriptを毎回すべて取得し直すため、通信量が増え、遷移のたびに一定の待ち時間が発生します。

// 悪い例: ブラウザ標準の遷移
<a href="/posts">投稿一覧へ</a>

一方、Next.jsが用意している Link コンポーネントを使うと、同じアプリ内のページ間ではクライアント側の遷移になります。ページ全体を読み込み直すのではなく、変わる部分だけを差し替えるので、体感的に速く感じられます。あわせて、画面に表示されたリンク先を事前に読み込んでおく仕組み（プリフェッチ）も働くため、実際にクリックした時にはすでに準備が整っていることが多いです。

// 良い例: Next.jsのクライアント側遷移
import Link from "next/link";

<Link href="/posts">投稿一覧へ</Link>

【どこでも Link にすればいいわけではない】
ただし、これは「同じアプリ内のページ」に限った話です。外部サイトへのリンクや、Next.jsのルーティングの外にあるページへは、これまで通り <a href> を使います。Link はあくまでアプリ内の遷移を速くするための仕組みで、外部リンクにまで無理に使う必要はありません。

「じゃあ Link にしておけば常に速くなるのか」というと、それも少し違います。速さの差を生んでいるのは「ページ全体を取りに行くか、変わる部分だけ取りに行くか」の違いなので、ページの構成やデータ量によって体感差の大きさは変わります。小さなページ同士の遷移では、正直そこまで差を感じないこともあります。それでも、ページ数が増えたアプリになるほど、この差はじわじわ効いてきます。

【実際に確認する方法】
自分のコードがどちらの動きになっているか、見た目だけでは判断しづらいこともあります。そんな時は、ブラウザの開発者ツール（DevTools）の「Network」タブを開いた状態でリンクをクリックしてみてください。

  • <a href> でのフルリロードの場合: 一覧に、そのページのHTMLファイルからJavaScriptファイルまで、まとまった量の通信がまとめて出てきます
  • next/link でのクライアント側遷移の場合: HTML全体の再取得は起きず、遷移先のデータだけを取りに行く小さな通信が1つか2つ出てくる程度です

この違いを一度自分の目で見ておくと、「今のリンクはどちらの動きをしているか」を、コードを見た瞬間に判断できるようになります。

【AIに確認するときの聞き方】
アプリ内のページ遷移を作ってもらったら、「このリンクは next/link の Link コンポーネントを使っていますか？」と一言確認するだけで、この種の見落としはその場で気づけます。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

プログラミングの知識だけでなく、AIへの指示の出し方や、AIが出してきたコードを自分の言葉で確認する目も、教材を進める中で自然に身についていきます。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください