【Next.js】useRouter の5大メソッドまとめ｜push・replace・back・forward・refresh の役割

Next.js の App Router を使っていると、router.push() や router.replace() など似たメソッドが多くて混乱しませんか？
この記事では、useRouter で使えるルーターの種類と役割を整理します。

---

📌 使用ツール

• Next.js (App Router)
• TypeScript（任意）

---

📌useRouter のインポート例

"use client";

import { useRouter } from "next/navigation";

const Example = () => {
  const router = useRouter();
};

📌 1. router.push("/path")

意味 : 指定したパスへ移動し、ブラウザの履歴に新しいページを1つ追加する
特徴 : ブラウザの戻るボタンで元のページに戻れる
使い所 : 一般的なリンク遷移、商品詳細やプロフィールページへの遷移など

  return (
    <button onClick={() => router.push("/dashboard")}>
      ダッシュボードへ移動
    </button>
  );

📌 2. router.replace("/path")

意味 : 指定したパスへ移動し、いま表示している履歴を別のページに上書きする
特徴 : ブラウザの戻るボタンを押しても元のページに戻れない
使い所 : ログイン後のダッシュボードリダイレクト、フォーム送信後のリロード防止など

• 一度きりのページ（ログイン画面やフォーム送信直後）」に便利
• 戻って来られると困るページを消す

  return (
    <button onClick={() => router.replace("/login-success")}>
      ログイン
    </button>
  );

---

📌 3. router.back()

意味 : ブラウザ履歴の 1つ前のページに戻る。
特徴 : window.history.back() と同じ動作。
注意点 : 直リンクなど履歴が無い場合は何も起きない。
使い所 : 戻るボタン実装、モーダル閉じ処理など。

💡window.history.back()
JavaScript の組み込み関数で、ブラウザの「戻るボタン」を押したのと同じ動作をする

  return (
    <button onClick={() => router.back()}>
      前のページに戻る
    </button>
  );

---

📌 4. router.forward()

意味 : ブラウザ履歴の 1つ先のページに進む。
特徴 : window.history.forward() と同じ動作。
使い所 : あまり使われないが、独自のナビゲーションUIで「進む」を実装する場合など。

  return (
    <button onClick={() => router.forward()}>
      次のページに進む
    </button>
  );

---

📌 5. router.refresh()

意味 : ページをリロードせず、サーバーから最新データを取り直して画面を更新する仕組み
特徴 : URLは変わらず、サーバーから最新データを取り直す。
使い所 : データ更新後に画面をリフレッシュして最新状態を表示したいとき。

• 他のルーターAPI（push や replace）と違って URLを変えずにデータだけ更新できるのが最大の特徴です

  return (
    <button onClick={() => router.refresh()}>
      最新データを取得する
    </button>
  );

"use client";

import { useRouter } from "next/navigation";

export default function SimpleForm() {
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // ここでDBに新しいデータを追加したと仮定
    await fetch("/api/add", { method: "POST" });

    // 追加後に最新データを再取得
    router.refresh();
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">追加して更新</button>
    </form>
  );
}

• フルリロードではない
  ブラウザ全体を再読み込みするのではなく、Next.js が裏で Server Components を再フェッチし、差分だけ描画を更新します。スクロール位置や一部の状態は維持されます。

• キャッシュを無効化できる
  Next.js はデフォルトでフェッチ結果をキャッシュすることがありますが、router.refresh() を呼ぶと強制的に最新データを取得します。

• API呼び出し後の「即時反映」に便利
  例えば「投稿追加」「削除」などを行ったあとに、手動で一覧を更新させたいときに最適です。React Query の refetch() に似た役割。

• Client Componentsの状態は保持
  再描画されるのは Server Components 部分のみ。
  クライアント側の入力中データなどは基本的にそのままです。

---

📌 まとめ

メソッド	履歴の扱い	主な使い所	備考
router.push("/path")	履歴を追加 （戻れる）	一般的なページ遷移 例：一覧 → 詳細	戻るボタンで戻れる
router.replace("/path")	履歴を置換 （戻れない）	ログイン後の遷移 フォーム送信後のリダイレクト	戻るボタンで戻れない
router.back()	履歴を1つ戻す	戻るボタンやモーダル閉じ	window.history.back() と同じ
router.forward()	履歴を1つ進める	独自の「進む」ボタン	使用頻度は少なめ
router.refresh()	URLそのままで再描画	投稿追加・削除直後の即時反映	フルリロードでなく差分更新

👉「戻れるようにしたいなら push、戻らせたくないなら replace、履歴を操作するなら back/forward、データだけ最新にしたいなら refresh」と覚えると整理しやすいです