本PJではNext.js公式チュートリアルを元に実施します。
今回はchapter5の内容となります！
🚀 もう待たせない！Next.jsの爆速ページ移動とナビゲーションの秘密
Webサイトを見ていて、「次のページに移るとき、一瞬画面が真っ白になる…」と感じたことはありませんか？従来のWebサイトでは、それが当たり前でした。
しかし、Next.jsを使えば、まるでスマホアプリのように「サクッ」とページが切り替わる、ストレスフリーな体験を実現できます。
今回は、その"魔法"の正体であるページ間ナビゲーションの最適化について、裏側の賢い仕組みと一緒に見ていきましょう！
🔗 ページ移動の基本：<a>タグから<Link>コンポーネントへ
😫 従来の<a>タグの問題点
普通のHTMLでは、<a href="...">というタグを使ってページをリンクします。しかし、これには大きな弱点がありました。
それは、リンクをクリックするたびにページ全体をゼロから読み込み直す（フルページリフレッシュ）ことです。
これは、お店を出て、また隣の新しいお店に完全に入り直すようなもの。毎回「いらっしゃいませ！」からやり直すので、どうしても少し時間がかかってしまいます。これでは、現代のアプリのような滑らかな体験は提供できません。
✨ Next.jsの解決策：魔法のコンポーネント
この問題を解決するのが、Next.jsのヒーロー、コンポーネントです。
-
使い方： next/linkからインポートして、従来の
<a>を<Link href="...">に置き換えるだけ！ -
効果： ページ全体をリロードせず、変更があった部分だけをJavaScriptで賢く入れ替えてくれます。
これは、同じ建物（アプリ）の中で、隣の部屋に移動するようなイメージです。建物自体はそのままなので、移動は一瞬で完了します。この仕組みをクライアントサイドナビゲーションと呼び、ユーザーに高速で滑らかな体験を提供します。
🤖 <Link>が超高速な2つの秘密
では、なぜコンポーネントはこんなにも賢く、速いのでしょうか？その背景には、Next.jsに標準装備された2つの強力な最適化機能があります。
🛍️ 必要なものだけお届け！「自動コード分割」
従来のWebアプリでは、最初にサイトを開いたときに、すべてのページのプログラムコードを一度に読み込んでいました。これは、コース料理を注文したのに、前菜からデザートまで全品が一度にテーブルに並べられるようなものです。最初の読み込みが非常に重くなってしまいます。
一方、Next.jsはページごとにコードを自動で分割（コード分割）してくれます。
つまり、ユーザーがアクセスしたページの分だけを最初に読み込むのです。これにより、初期表示が非常に高速になり、たとえどこか一つのページでエラーが起きても、サイト全体がダウンするのを防いでくれます。
🔮 未来予知でおもてなし！「プリフェッチ機能」
Next.jsの"おもてなし"はさらに続きます。本番環境では、こんな未来予知のような機能が自動で働きます。
動作： ユーザーの画面（ビューポート）にコンポーネントで設置されたリンクが見えた瞬間、Next.jsは「この人は次にこのページへ移動するかもしれないな」と予測し、リンク先のページのコードを裏側でこっそり読み込み始めます。
これをプリフェッチ（事前読み込み）と呼びます。
まるで、あなたがレストランでメニューを眺めている間に、シェフが次に注文されそうな人気メニューの下ごしらえを済ませておくようなものです。
結果： ユーザーが実際にリンクをクリックする頃には、もうページの準備は万端。クリックした瞬間に「お待たせしました！」とばかりに、ページがほぼタイムラグなしで表示されるのです。
📍 今どこにいるか一目瞭然！「アクティブリンク」の実装
優れたWebサイトでは、「今、自分がどのページにいるか」がナビゲーションメニューを見ればすぐにわかります。これをアクティブリンクと呼びます。地図アプリで現在地がハイライトされるのと同じですね。
Next.jsでは、usePathname()というフックを使うことで、これを驚くほど簡単に実装できます。
実装の3ステップ
1. 'use client';のおまじない：
usePathname()はユーザーのブラウザ上で現在のURLをチェックする機能なので、コンポーネントのファイルの先頭に'use client';と記述して、「この部品はブラウザ側で動かしますよ！」とNext.jsに教えてあげます。
-
usePathname()で現在地を取得：
usePathnameをnext/navigationからインポートし、コンポーネント内で呼び出すだけで、現在のURLパス（例：/dashboard/invoices）を取得できます。 -
スタイルを動的に変更：
取得した現在のパスと、各リンクのパス（href）を比較します。もし両者が一致すれば、特別なCSSクラス（例：背景色を青にするクラス）を適用します。これにはclsxのようなライブラリを使うと便利です。
この簡単な実装だけで、ユーザーがページを移動するたびに、対応するリンクが自動でハイライトされる、直感的で親切なナビゲーションが完成します。
今回はここまで！
ご覧いただきありがとうございます！