【Next.js 開発】localhost:3000 に過去に開発した画面が出る問題を解決した話

はじめに

はじめましての人もそうでない人もこんにちは！

最近、Next.js で開発しているときに、localhost:3000 に古い画面が表示される問題に遭遇したので、備忘録も兼ねてまとめてみました！
同じように困っている人の参考になれば嬉しいです！

1. 問題の状況

普段使っている Chrome で開発サーバーを立ち上げたところ、前に作った別のプロジェクトの画面が出てくるという現象が起きました！
最初は「あれれ～おかしいぞ～？」と混乱しました
PC本体を再起動したり3000番Portのプロセスをkillしたりなど自分なりに調査・試行錯誤行った結果以下のことがわかりました！

• ゲストモードで開くと正常に最新の画面が表示される
• 普段使っているアカウントでは古い画面が残る

2. 解決方法

私が実際に試して解決できた方法は以下の通りです！

3-1. 古い開発サーバーのプロセスを止める

PowerShell でポート3000を使っているプロセスを調べます！

netstat -ano | findstr :3000

出てきたPIDを使ってプロセスを終了します。

taskkill /PID (表示されたPIDをここに入力)

3-2. ブラウザのキャッシュを無効化

開発中は Chrome の開発者ツールでキャッシュを無効化できます。

1. F12 で開発者ツールを開く
2. Network タブ を選択
3. 「Disable cache」にチェック
4. この状態でページをリロード（F5）

3-4. サービスワーカーを削除

サービスワーカーが残っていると、キャッシュが強制的に使われることがあります。

1. F12 → Application タブ
2. 左メニューで Service Workers を選択
3. URL を確認して Unregister をクリック
4. ページをリロード

4. なぜこれで直ったのか

今回、Unregister とキャッシュ削除で ブラウザに覚え込まれていた古い画面をリセット したので、最新の開発サーバーの画面が表示されるようになりました。

• ゲストモードでうまく表示されたのは、キャッシュ・サービスワーカーがゼロだったから
• 普段使っているアカウントでは残っていたので古い画面が出ていた

5. まとめ

Next.js で開発しているときに古い画面が表示された場合は、以下を確認すると大抵直ります。

1. 古い開発サーバーが動いていないか確認して kill
2. Chrome の開発者ツールでキャッシュ無効化
3. サービスワーカーを Unregister

おわりに

今回の記事はいかがだったでしょうか？
「大抵は再起動でどうにかなるやろ」と思い再起動しても治らなかったので最初は焦りましたがなんとかなってよかったです！

それでは、最後まで見ていただき、ありがとうございました！
また、どこかの記事でお会いしましょう！