【Windows編】Next.jsの環境構築でNodeとVoltのバージョンで躓いた

サムネイル
               

Reactを学ぶにはNext.jsと合わせて学ぶとよい！そんな情報をもらったのでNext.jsの環境構築を始めた。

 

が！！！思いっきり躓いたので、健忘録的にまとめておくことにした。

 

 

 

【Windows編】Next.jsの環境構築でNodeとVoltのバージョンで躓いた

node.jsのバージョンが古かった

 

VScodeのコマンドプロンプトからyarnをインストール。yarn create next-appと叩くとヤバいことに。。。。

全く意味が分からない。。。が適当に使うものをyesにしてあとはno

次にcd study-react/→yarn devと叩きyarnを起動！っが。。。

You are using Node.js 18.16.0. For Next.js, Node.js version >= v18.17.0 is required.

。。。どうやらNode.jsのバーションが古いらしい。相当昔にNode.jsをインストールしていじった記憶がある。その頃の残骸が残っているのであろう。

 

そこから、相当苦労することになります。

 

node.jsのバージョンを切り替えられない

 

nvm install 18.17.0で新しめのものをインストールしてnvm use 18.17.0で切り替え

 

node -vで何度確認してもv18.16.0で変更されない。

 

where.exe nodeでNode.js のパスを確認すると、C:\Program Files\Volta\node.exe C:\Program Files\nodejs\node.exeと表示され、Volta というツールが影響しているようでした。

 

volta listでVolta が管理している Node.js のバージョンを確認

PS C:\Users\yuduk\study-react> volta list
>>
⚡️ Currently active tools:

Node: v18.16.0 (default)
npm: v9.7.1 (default)
Yarn: v3.6.0-git.20230603.hash-3c8237cb (default)
Tool binaries available:
sass (default)

See options for more detailed reports by running `volta list --help`.

やっぱりバージョンが古いようで、Node: v18.16.0 (default)でした。

 

volta use node@18.17.0でバージョンを切り替え！しかし、、、またエラーが

PS C:\Users\yuduk\study-react> volta use node@18.17.0
>>
error: The subcommand `use` is deprecated.

To install a tool in your toolchain, use `volta install`.
To pin your project's runtime or package manager, use `volta pin`.

Voltaのバージョンも古く新たにインストール

 

Voltaのuseサブコマンドは廃止されています。代わりに、volta installを使用してツールチェーンにツールをインストールする必要があるようです。

 

volta install node@18.17.0を叩くと

PS C:\Users\yuduk\study-react> volta install node@18.17.0
>>
success: installed and set node@18.17.0 as default
PS C:\Users\yuduk\study-react> cd C:\Users\yuduk\study-react
>> volta pin node@18.17.0
>>
success: pinned node@18.17.0 (with npm@9.6.7) in package.json
PS C:\Users\yuduk\study-react> node -v
v18.17.0

無事にvoltaのバージョンが切り替わりnodeのバージョンもv18.17.0に変更できました。（長かった。。。）

 

yarn devでしていきます。

PS C:\Users\yuduk\study-react> yarn dev
▲ Next.js 14.1.4
- Local: http://localhost:3000

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

✓ Ready in 4.3s

やったね！Next.js プロジェクトが正常に起動しました！

 

 

まとめ：Next.jsを学ぶ際に注意すべきポイント

Node.jsのバージョン管理: Next.jsは特定のNode.jsバージョンを必要とする場合があります。プロジェクトを始める前に、公式ドキュメントやリリースノートを確認して、推奨されるNode.jsバージョンを把握してください。

 

依存関係の管理: プロジェクトを初期化する際に、依存関係が正しくインストールされていることを確認してください。特に、パッケージマネージャー（例：npmやyarn）のバージョンも重要です。