Next.jsでページ間をナビゲートするにはどうしますか？

Question

Accepted Answer

Next.jsは、ページ全体をリロードするよりも高速な**クライアント側ナビゲーション**を提供します。新しいページのデータ/コンポーネントだけをフェッチして交換し、共有レイアウトはマウントされたままになります。 ## Link コンポーネント（宣言的） ```tsx import Link from "next/link"; export default function Nav() { return ( ); } ``` `` は `` をレンダリングしますが、クライアント側ナビゲーション用にクリックをインターセプトします。重要な点として、リンクがビューポートに入ると、リンク先ルートを**プリフェッチ**するため、ナビゲーションが瞬時に感じられます。 ## プログラム的ナビゲーション（イベントハンドラ内） ```tsx "use client"; // useRouter needs a Client Component import { useRouter } from "next/navigation"; // note: next/navigation in App Router export default function LoginForm() { const router = useRouter(); async function onSubmit() { await login(); router.push("/dashboard"); // navigate after an action // router.replace("/x") — no history entry // router.back() — go back // router.refresh() — re-fetch server data for the current route } } ``` ナビゲーションがロジックに応じて発生する必要がある場合（フォーム送信後、ログイン後など）、リンク上のクリックではなく `useRouter` を使用します。 ## クライアント側ナビゲーションが高速である理由 - **フルリロードなし** — 変更されたセグメントのみが再レンダリングされ、共有レイアウトはマウントされたままです。 - **プリフェッチ** — `` はクリック前にルートをプリロードします。 - **状態を保存** — 変更されていないレイアウトはナビゲーション全体で状態を保ちます。 ## 重要: next/navigation からインポートする App Router では、フックは `next/navigation` (`useRouter`, `usePathname`, `useSearchParams`) から来ます — 古い `next/router` からではありません（それは Pages Router のみです）。混同するのはよくあるエラーです。 ## なぜ重要なのか ``（自動プリフェッチ付き）と `useRouter` は、Next.jsが知られている高速でSPA風のナビゲーションを構築する方法です。プレーンな ``（フルリロードを強制します）の代わりに使用することで、アプリを速く保ち、レイアウト状態を保存できます。