はじめに
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 を導入しておくと、今後の開発でも柔軟に対応できるようになるので非常に便利です!