router.push？router.replace？window.location.href？どれ使えばいいのか調べてみた

はじめに

11章の実装に入るまでに、画面遷移のコードをいくつかのパターンで書いてきました。

と思ったので、今回は、自分の備忘録として、この3つの方法の違いと、使い分けのポイントをまとめてみました。

それぞれの使い方をざっくり紹介

router.push

普通のページ移動に使います。履歴に残るので、ブラウザの「戻る」ボタンで前のページに戻れます。

import { useRouter } from 'next/navigation'; // App Routerの場合

function MyComponent() {
  const router = useRouter();
  
  const handleClick = () => {
    router.push('/about');
  };
  
  return <button onClick={handleClick}>Aboutページへ</button>;
}

router.replace

移動するけど、履歴を上書きします。つまり「戻る」ボタンで戻れません。

const handleLogin = async () => {
  // ログイン処理
  await login();
  
  // ログイン画面には戻らせない
  router.replace('/dashboard');
};

window.location.href

Next.jsの機能を使わず、ブラウザそのものでページ移動します。 ページ全体をリロードして移動するので、Next.jsの高速な遷移は使えません。

const handleExternalLink = () => {
  window.location.href = 'https://example.com';
};

どんな場面で、どれを使うべきか

僕がまとめた使い方はこんな感じです。

router.push：通常のページ遷移に使う

もっともよく使う基本の遷移方法です。
履歴に残るので、ユーザーが「戻る」ボタンで前のページに戻れます。

画面遷移が一瞬です。ページ全体を読み込み直さずにスムーズに切り替わるのが特徴です。

使う場面：

• 一般的なページ移動

• 投稿一覧 → 投稿詳細 など、自然な前後関係がある遷移

例：

const handleClick = () => {
  router.push('/posts/1');
};

一覧から詳細ページへ進み、戻るボタンで戻れるようにしたい時に最適です。

router.replace : 戻らせたくない遷移に使う

router.push と似ていますが、履歴を上書きするため、ユーザーが「戻る」で前のページへ戻れません。
特にログイン後など「一方通行で進ませたい」フローで便利です。

使う場面：

• ログイン後にダッシュボードへ遷移（ログイン画面には戻らせない）

• フォーム送信完了後、完了ページへ一方通行で遷移したい時

例：

// ログイン処理後に一方通行で遷移
const handleLogin = async () => {
  await login();
  router.replace('/dashboard');
};

このように、戻ると混乱する画面や、同じページに戻す必要がないケースで使います。

window.location.href ：ページを完全にリロードしたい時に使う

ブラウザ標準の遷移を行うため、Next.jsの差分描画は行われません。
その代わり、ページ全体がリロードされ、状態を完全にリセットできます。

ページ全体を再読み込みする分、Next.jsの差分描画や事前読み込みが効かず、 router.push や router.replace に比べてパフォーマンス面で不利になります。

使う場面：

• Next.jsの外（外部サイトや別アプリ）へ遷移する時

• 認証情報を確実に破棄したい（ログアウト時など）

例：

// 外部サイトへ移動
window.location.href = 'https://example.com';

// ログアウト後に完全リロード
await supabase.auth.signOut();
window.location.href = '/';

Next.jsの高速遷移は効かないものの、状態を強制的にリセットしたいときには便利です。

おまけ：<Link>との違い

ここまでrouter.pushなどの話をまとめながら、ふと「じゃあ<Link>は何者？」って思ったのでおまけとして追記しておきます。

どちらもNext.jsでページを移動させるための手段ですが、使いどころと仕組みが少し異なるようです。

import Link from 'next/link';

<Link href="/about">Aboutページへ</Link>

使い分けはシンプル：

• <Link> → ユーザーがクリックして移動する時

• router.push → ボタンを押したり、処理が終わった後に自動で移動させたい時

例えば：

// ユーザーがクリック → <Link>を使う
<Link href="/profile">プロフィール</Link>

// フォーム送信後に自動で移動 → router.pushを使う
const handleSubmit = async () => {
  await saveData();
  router.push('/complete'); // 保存後に自動で移動
};

また、<Link>は自動でページをprefetch（事前読み込み）してくれるので、クリックした時の遷移がさらに速くなります。これもNext.jsの便利な機能です。

prefetch（事前読み込み）とは？

<Link> には、Next.js が自動で行う プリフェッチ（prefetch）機能 が備わっています。
これは「リンク先のページデータやJSを、あらかじめバックグラウンドで読み込んでおく」仕組みです。
そのリンクが画面内（ビューポート内）に表示されたタイミングでNext.jsが自動的に動作します。

結果、クリックしたときにはすでに必要なデータが揃っており、遷移が一瞬で完了します。

⚙️ プリフェッチは 本番環境のみ有効
開発中では無効化されているため、動いていないように見えても正常です。

まとめ

Next.jsのページ遷移、最初は「なにが違うんだろう」と思っていましたが、調べてみると奥が深かったです。

覚えておきたいポイント：

• 基本はrouter.pushか<Link>を使う

• 戻らせたくない時はrouter.replace

• Next.jsの外（外部サイトや完全リロード）はwindow.location.href

もっと奥深いものなのかもしれませんが、今のところ、この使い分けを意識していこうと思っています！

参考リンク：

• useRouter - Next.js

• next/link - Next.js