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の管理外であり、ブラウザに通常の遷移をさせる必要があるため)「なぜこのタグを使うのか」という仕組みの理解につながる、非常に重要で実践的な知識です。