🌐

Next.jsでリダイレクト設定が別プロジェクトにも影響する→ブラウザキャッシュが原因だった。

に公開
Next.js
リダイレクト
localhost
tech

たとえば、あるプロジェクトAでnext.config.mjsに以下のようなリダイレクト設定を入れているとします。

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/login',
        permanent: true, // 301リダイレクト(恒久的)
      },
    ];
  },
};

export default nextConfig;

上記の設定では、localhost:3000へアクセスすると必ず/loginページへリダイレクトされるようになります。

プロジェクトAでの動作確認

  1. yarn devコマンドでプロジェクトAを起動し、localhost:3000へアクセス。
  2. 期待通り、/loginへリダイレクトされることを確認。

ここまでは想定通りの挙動です。

プロジェクトをBへ切り替える

次に、あなたは別のプロジェクトBへ移動し、同様にyarn devでサーバーを起動するとします。
ここで重要なのは、プロジェクトBではnext.config.mjsにリダイレクト設定が一切ないという点です。

しかし、先ほどと同様にlocalhost:3000へアクセスしてみると、なぜか再び/loginへリダイレクトされてしまいます。

「プロジェクトBにはそんな設定入れていないのに、なんで勝手に/loginへ飛ばされるんだ？」という疑問が生まれます。

なぜこのような現象が起きるのか？

この原因は、ブラウザ側がリダイレクト結果をキャッシュしていることにあります。

  1. プロジェクトAで/→/loginへの301リダイレクトをブラウザが受け取った。
  2. ブラウザは「localhost:3000は常に/loginへリダイレクトする」といった情報をキャッシュとして記憶。
  3. プロジェクトAのサーバーが止まっているにもかかわらず、同一のlocalhost:3000というエンドポイントへアクセスした際、ブラウザは過去のキャッシュを使い、/loginへのリダイレクトを勝手に適用してしまう。

その結果、プロジェクトB（リダイレクト設定なし）を起動しても、ブラウザは過去に取得したリダイレクト情報を参照して、再び/loginへ飛ばしてしまうわけです。

解決策：キャッシュのクリア・ハードリロード

この問題のシンプルな解決方法は、ブラウザキャッシュをクリアしてハードリロードすることです。
以下は、Chromeの場合の一例です。

  1. Chromeで対象タブを開いた状態で開発者ツール(DevTools)を起動します。
    • Windows: Ctrl + Shift + I
    • Mac: Command + Option + I
  2. アドレスバー左にあるリロードボタン（丸い矢印）を右クリックします。
  3. 「キャッシュの消去とハード再読み込み」を選択します。

これにより、ブラウザが持っていたリダイレクトのキャッシュがクリアされます。
再度localhost:3000を開いてみると、プロジェクトBでは/loginへのリダイレクトが発生せず、本来のトップページが表示されるはずです。

まとめ

  • next.config.mjsでリダイレクト設定を行ったプロジェクトAをテストした後、別のプロジェクトBでも不本意なリダイレクトが続く場合は、ブラウザがリダイレクト結果をキャッシュしている可能性が高いです。
  • この問題は、ブラウザのキャッシュをクリアしてハードリロードを行うことで簡単に解決できます。

同じような状況に陥った場合は、ぜひこの方法を試してみてください。

Discussion