Next.jsのversionを13から14に更新するためにしたこと
先日、趣味ブログの開発で使用しているnextjsを v13からv14に更新しました。
v12からv13に更新した際はコードに大幅な変更を入れる必要がありました(主にAppRouter対応)が、今回はコードの変更は全く必要ありませんでした。
ここではnextjs v14へバージョンアップするにあたり、実際に行った作業を記載します。
npmパッケージの更新
公式ドキュメントに記載されているコマンドを実行し、バージョンアップに必要となるnpmパッケージを更新します。
私はパッケージマネージャーにnpmを使用しているため以下のコマンドを実行しました。
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
nodejsのバージョンアップが必要
上記コマンドを実行したところ、以下の警告が表示されました。
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'next@14.0.3',
npm WARN EBADENGINE required: { node: '>=18.17.0' },
npm WARN EBADENGINE current: { node: 'v16.14.0', npm: '8.3.1' }
npm WARN EBADENGINE }
どうやらローカルマシンにインストールされているnodejsのバージョン(v16.14.0)が、nextjs v14のサポート対象外(最低でもnodejs v18.17.0が必要)であるために表示されている警告のようです。
nextjs v13では問題なく動作していたため破壊的な変更です。
nodejsのダウンロードページより、現時点での最新LTSであるバージョンをインストールし、再度上記コマンドを実行したところエラーは表示されなくなりました。
cloudflare pages側の設定変更
私は趣味ブログをcloudflare pages上で公開しています。今回nextjs v14に更新するにあたり、以下の設定変更を行いました。
ビルドシステムをV1からV2に更新
今回のタイミングで、2023年の5月に発表されたV2ビルドシステムを使用するように設定を変更しました。
従来のcloudflare pagesでは、ビルドシステムにデフォルトで採用されているnodejsのバージョンがv12.18.0と古く、v16以上を指定するために環境変数NODE_VERSIONの設定が必要でした。
今回nextjs v14へ更新するにあたり、ローカルマシンと同様ビルドシステムのnodejsバージョンも変更する必要があります。
この記事の記載時点で、V2ビルドシステムにはnodejs 18.17.1が採用されているため、こちらに切り替えることで問題なくビルドできるようになります。
設定変更は簡単で、管理画面の「設定」>「ビルド & デプロイ」>「ビルド システムのバージョン」よりバージョンを選択して「保存」をクリックするだけです。
NODE_VERSIONの削除
上記手順でV2ビルドシステムを使用するように変更しても、環境変数NODE_VERSIONを指定しているとそちらのバージョンが優先されてしまうため、環境変数は削除しました。
まとめ
以上の手順で問題なくnextjs v14に更新することができました。v12からv13に更新した時と比較してかなり簡単に更新することが出来たので良かったです。
この記事が参考になれば嬉しいです。
Discussion