Next.jsのローカルが起動しない！無限ロードの解決方法

Next.jsの学習中に遭遇したエラー

Next.js について学ぶために、ローカル環境で色々いじっていたときのこと。

あるとき、「npm run dev」を行ってもローカルサーバーが「Starting」のままずっと起動しない問題に遭遇してしまいました。

ChatGPTではなかなか解決できなかったので、備忘録として書き残します。同様の問題に当たった方の参考になれば幸いです。

問題の発生

Next.js プロジェクトで npm run dev コマンドを実行した際、開発サーバーが「Starting」のまま進行せず、起動しない問題が発生。

解決までに試したこと

1. ログの確認

Copilotに推奨されたため、最初に npm run dev --verbose コマンドを実行して詳細なログを確認してみました。しかし、特定のエラーメッセージは表示されず、原因を特定できませんでした。

2. 依存関係の確認

次に、npm install コマンドを実行して依存関係が正しくインストールされていることを確認しましたが、問題は解決しませんでした。

3. キャッシュのクリア

続いて、npm cache clean --force コマンドを実行して npm のキャッシュをクリアしましたが、依然として問題は解決しませんでした。

4. 【解決】 .next フォルダの削除

最終的に、プロジェクトディレクトリ内の .next フォルダを削除してみました。

その後、npm run dev コマンドを再実行すると、開発サーバーが正常に起動しました！良かった！

解決の理由

.next フォルダには Next.js のビルドキャッシュや一時ファイルが含まれているとのこと。これらのファイルが破損していたり、古いキャッシュが残っていたりすると、ビルドや開発サーバーの起動に問題が発生することがあります。

「npm cache clean --force 」ではダメなんですね…。

ひとまず、.next フォルダを削除することで、Next.js はクリーンな状態から再ビルドを行い、問題が解消されました。

• 定期的なキャッシュクリア: 開発中に問題が発生した場合、定期的に .next フォルダを削除してキャッシュをクリアする。
• 依存関係の更新: 依存関係が古くなっている場合、npm update を実行して最新の状態に保つ。

上記を試したほうが良いということですかね。

Next.js、知れば知るほど便利そうでとても魅力的です！今までフロントエンドしかやっていなかったのでかなり新鮮ですね。

覚えることがたくさんあり、サーバーエンド的な考え方や文法にはまだまだ不慣れで、初歩的なことで躓いたりしています。この記事が同じようなレベル感で躓いている方の一助になれば幸いです。