Next.jsで別ページに遷移するとき、専用の Link コンポーネントを使わずに普通の a タグを使うとどうなる？

解説

正解は「遷移できるが、画面全体が再読み込みされる」です。普通の a タグを使ってもエラーにはならず、目的のページへ移動すること自体は可能です。しかし、リンクをクリックした瞬間にブラウザのタブでローディングが回り、画面全体が白く「フルリロード（再読み込み）」されてしまいます。「動くならどっちでもいいのでは？」と思うかもしれませんが、Next.jsにおいてこれは非常にもったいない実装です。他の選択肢である「エラーになる」「自動変換される」といったことも起きないため、初学者が無意識のうちに見落としやすいポイントになっています。「SSR」なのに「SPA」？Next.jsのハイブリッドな仕組みNext.jsといえば「SSR（サーバーサイドレンダリング）」のイメージが強いかもしれません。「SSRなのにSPAってどういうこと？」と疑問に思う方も多いでしょう。実は、Next.jsは最初のアクセスと、その後のページ遷移で動き方が変わるハイブリッドな仕組みを持っています。最初のアクセス（またはaタグでの遷移）: サーバー側で完成されたHTMLを作ってブラウザに返す（SSR/SSG）。クローラーが内容を読み取れるためSEOに強く、初期表示も速い。Linkコンポーネントでの遷移: ブラウザ側でJavaScriptが動き、サーバーからは「次のページの差分データ（JSONやRSCペイロード）」だけを受け取って画面の一部を書き換える（SPA的なクライアントサイドルーティング）。つまり、Link コンポーネントを使うことで、「最初はSSRの恩恵を受けつつ、アプリ内の移動はSPAのようにサクサク動く」というNext.jsの最強のメリットを活かすことができるのです。aタグを使うと何が起きてしまうのか？もしNext.js内で普通の a タグ（<a href='/about'> など）を使ってしまうと、ブラウザは「全く別の新しいWebサイトに移動した（最初のアクセスと同じ）」と判断し、再度SSRの処理やリソースの全ダウンロードが走ってしまいます。その結果、以下のような問題が発生します。パフォーマンスの低下: HTML、CSS、JavaScriptなどのリソースをゼロからすべてダウンロードし直すため、画面表示が遅くなります。状態（State）の消失: useState などで保持していたデータ（例：入力途中のフォーム内容、開いていたモーダルウィンドウなど）が、リロードによってすべてリセットされてしまいます。さらに凄い！Linkの「プリフェッチ」機能Link コンポーネントには、画面遷移をさらに爆速にするプリフェッチ（Prefetching）という強力な機能がデフォルトで備わっています。ユーザーがスクロールしてリンクが画面内に入った瞬間、Next.jsは「このユーザーは次にこのページに行くかもしれないな」と予測し、裏側でリンク先のページのデータをあらかじめ取得（先読み）してくれます。これにより、クリックしたときには「一瞬」でページが表示されるという最高のユーザー体験を作ることができます。実務での正しい使い分けここまで解説した通り、現場では以下のように明確に使い分けます。自サイト内の別ページへの移動: Link コンポーネントを使う（SPA遷移・状態維持・プリフェッチの恩恵を受けるため）外部サイトへの移動: a タグを使う（外部サイトはNext.jsの管理外であり、ブラウザに通常の遷移をさせる必要があるため）「なぜこのタグを使うのか」という仕組みの理解につながる、非常に重要で実践的な知識です。