npm run devを実行してもローカルサーバーが立ち上がらない時の対処法

初めまして！
普段Xで活動しているmuguと申します！
Xで活動している傍ら、エンジニアとして開発している際に出てきたエラーや制作物をこちらのQiitaにまとめていこうと思います。

エラー内容

画像のような感じでブラウザにてアクセスしてみると「ERR_CONNECTION_REFUSED」と表示されました

環境情報

• OS: Windows 10 (10.0.19045)
• Node.js: v22.12.0 → v18.17.0（解決後）
• Next.js: v14.2.0 → v13.4.19（解決後）

試した解決策

1. 実行する際のディレクトリの確認

→合っていました

2. 新規で別のフォルダを作成してみたが効果なし

3. ポート番号の変更

・3000→4000に変更

4. node_modulesとpackeg.jsonの再インストール

→効果なし

最終的な解決策

上記の修正を試みましたが、根本的な問題はNode.jsとNext.jsのバージョンの互換性にありました。

解決策1: Node.jsのバージョンを変更

NVM for Windowsを使用して、Node.jsのバージョンを変更しました：

nvm install 18.17.0
nvm use 18.17.0

解決策2: Next.jsのバージョンをダウングレード

package.jsonファイルを編集して、Next.jsのバージョンを14.2.0から13.4.19に変更しました：

{
  "dependencies": {
    "next": "13.4.19",
    // ...
  },
  "devDependencies": {
    "eslint-config-next": "13.4.19",
    // ...
  }
}

その後、依存関係を再インストールしました：

npm install

まとめ

この問題は、主に以下の2つの要因によって引き起こされていました：

1. Node.jsのバージョンが新しすぎた：Node.js v22.12.0は最新すぎるため、Next.jsとの互換性に問題がありました。LTSバージョン（v18.17.0）に変更することで解決しました。

2. Next.jsのバージョンの問題：Next.js 14.2.0はまだ安定していない部分があり、特にWindowsパスの処理に関するESMの問題がありました。バージョン13.4.19に変更することで解決しました。

この経験から、新しいプロジェクトを始める際は、互換性のあるバージョンの組み合わせを使用することが重要だと学びました。特に最新のバージョンを使用する場合は、公式ドキュメントで推奨されるNode.jsのバージョンを確認することをお勧めします。