0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ハッカソン個人備忘録⑩:create-next-appを実行する前に!Node.jsバージョンのチェックを忘れずに

Posted at

はじめに

Next.js プロジェクトを作成しようとして npx create-next-app@latest next-app を実行したところ、Unexpected token '??=' というエラーが表示され、先に進めないというトラブルが発生しました。

この記事では、このエラーの原因とその解決方法を分かりやすく解説します。Node.js のバージョン管理ツール nvm を使う方法も紹介します。

書こうと思ったきっかけ

フロントエンド開発を始めようと Next.js の初期プロジェクトを作成する際、思いがけず構文エラーが発生しました。

調べてみると、Node.js のバージョンが古かったことが原因でした。

同じような状況でつまずく方も多いと思い、解決までの流れをまとめておきたいと思いました。

発生したエラーと原因

npx create-next-app@latest next-app
npx: 1個のパッケージを0.658秒でインストールしました。
Unexpected token '??='

原因

このエラーは、Node.js のバージョンが古いために ??=(Nullish Coalescing Assignment)という構文が使えないことが原因です。

この構文は Node.js v16.9.0 以降でサポートされています。Node.js v14 や v12 を使っている場合、このエラーが発生します。

解決策:Node.js のバージョンをアップデートする

今のバージョンを確認する

node -v

方法1:公式サイトからアップデート

Node.js の公式サイトから最新版(LTS推奨)をダウンロードしてインストールできます。

方法2(おすすめ):nvm を使う

Node.js のバージョンを簡単に切り替えられる「nvm(Node Version Manager)」を使う方法がおすすめです。

ステップ1:nvm をインストール

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

その後、以下を実行するか、ターミナルを再起動:

export NVM_DIR="$HOME/.nvm"
source "$NVM_DIR/nvm.sh"

ステップ2:Node.js v22.7.0 をインストール

nvm install 22.7.0

ステップ3:使用するバージョンを指定

nvm use 22.7.0

ステップ4:デフォルトに設定

nvm alias default 22.7.0

バージョン確認

node -v
# → v22.7.0 と表示されればOK

再実行してみる

Node.js のバージョンをアップデートしたあと、再度以下のコマンドを実行してみましょう:

npx create-next-app@latest next-app

問題なく Next.js のプロジェクトが作成できるはずです。

おわりに

Node.js のバージョンが原因で起こるトラブルは意外と多く、特に新しい構文を使うライブラリでは注意が必要です。nvm を導入しておくと、今後の開発でも柔軟に対応できるようになるので非常に便利です!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?