Next.jsを使用して開発している時に、突然陥ったエラーについて記録を残しておこうと思います📝

結論

ローカルのnodeのバージョン(23.1.0)と、開発中アプリケーションが期待するnodeのバージョン(20.11.0)が異なっていた。

（背景：他の言語の環境構築をしようとHomebrewを動かした時にどうやらnodeがバージョンアップされてしまったようです。絶対的にこれが原因かわからないですが、これくらいしか思い当たるものがないため..）

状況の詳細

npm run devでは何もエラーが起こらず、正常に動作。

nom run builにおいて下記のエラーが発生。

client %  npm run build

> client@0.1.0 build
> next build

  ▲ Next.js 14.2.11
  - Environments: .env

   Creating an optimized production build ...
Failed to compile.

./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?
..
..
..
..
..... + 4 modules
Unexpected end of JSON input

./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?..
..
..
..
.....  + 1 modules
Unexpected end of JSON input

./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?..
..
..
..
..... + 1 modules
Unexpected end of JSON input

./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?..
..
..
..
.....  + 1 modules
Unexpected end of JSON input

./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?..
..
..
..
.....  + 1 modules
Unexpected end of JSON input


> Build failed because of webpack errors

原因特定のために試したこと

自分の環境が原因かを確認する（Xや公式の情報をチェックしたり、周りの人に聞く）
.next、node_module、package-lock.jsonの削除→再度インストール
prisma generateしてみる
ローカルの別フォルダにクローンして動かしてみる
nextのバージョンがおかしくなってないか確認
npm のバージョン確認
npm のキャッシュ削除
nodeのバージョン確認 ← これだった

原因特定後にやったこと

nvmのインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

シェル再起動 or 以下実行

export NVM_DIR=“$([ -z “${XDG_CONFIG_HOME-}” ] && printf %s “${HOME}/.nvm” || printf %s “${XDG_CONFIG_HOME}/nvm”)“[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm

欲しいnodeのバージョンのインストール
```
nvm install 20.11.0
```

インストールしたバージョンのnodeを適用（これやらなくてもinstallで勝手にセットされた感じではありましたが一応）
```
nvm use 20.11.0
```

nodeのバージョン確認
```
node -v
```

.next, node_modules, package-lock.jsonの削除
　
npm のキャッシュ削除（マストなのかわからないですが一応）
```
npm cache clean --force
```

依存関係のインストール
```
npm install
```

ビルドを試す（成功）
```
npm run build
```

おわりに

もし同じような状況に遭遇した方がいたときに、少しでも参考にれば幸いです。