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」と覚えると整理しやすいです