はじめに
最近、業務でNext.jsをv14からv15へアップデートする機会がありました。その際の手順や注意点を、備忘録も兼ねて記事にまとめます。
依存ライブラリの脆弱性対応などでアップデート作業が必要になった方の参考になれば幸いです。
更新先のバージョンの確認
まず、いきなりアップデート作業を始めるのではなく、更新可能なバージョンを確認しましょう。
npm outdatedコマンドを実行すると、インストール済みのパッケージに新しいバージョンが存在するかどうかを確認し、一覧表示してくれます。
実行例:
$ npm outdated
Package Current Wanted Latest Location Depended by
primereact 10.9.2 10.9.3 10.9.3 node_modules/primereact your-project
typescript 5.7.3 5.8.2 5.8.2 node_modules/typescript your-project
Current: 現在インストールされているバージョン
Wanted: package.jsonのバージョン指定を満たす最新バージョン
Latest: パッケージの最新リリースバージョン
このコマンドで、どのパッケージにアップデートが必要か、大まかな状況を把握できます。
パッケージの更新
それでは、パッケージの更新を行います。更新作業に便利なライブラリがあるので紹介します。
npm-check-updatesを使うと、package.json内の依存関係の確認や更新を簡単に行えます。今回はこのツールを使って作業を進めます。
npm-check-updates のインストール
まず、以下のコマンドでnpm-check-updatesをグローバルにインストールします。プロジェクトごとにインストールする場合は -g オプションを外してください。
npm install -g npm-check-updates
インストールが完了したら、ncuコマンドが使えるようになります。
更新可能なパッケージの確認
package.json があるディレクトリで以下のコマンドを実行します。
ncu
これにより、npm outdatedと同様に、更新可能なパッケージとその最新バージョンが表示されます。ncuは、package.jsonを実際に書き換えることなく、どのバージョンに更新できるかを確認するのに便利です。
実行例:
$ ncu
Checking package.json
[====================] 20/20 100%
next ^14.1.0 → ^15.0.0
react ^18.2.0 → ^18.3.0
react-dom ^18.2.0 → ^18.3.0
typescript ^5.3.3 → ^5.8.2
Run ncu -u to upgrade package.json
package.json の更新
ncuで更新内容を確認したら、実際にpackage.jsonを更新します。
特定のパッケージのみを更新したい場合は、パッケージ名を指定します。今回はNext.jsのアップデートが目的なので、まずはnextパッケージを指定して更新してみます。
ncu -u next
reactやreact-domなど、Next.js v15が要求する関連パッケージも併せて更新します。
ncu -u next react react-dom
あるいは、ncuで表示された全てのパッケージを最新バージョンに更新する場合は、-uオプションのみを指定します。
ncu -u
注意: 一度に全てのパッケージを更新すると、予期せぬ問題が発生する可能性があります。
特にメジャーバージョンのアップデートが含まれる場合は、主要なライブラリ（今回はnext）から段階的に更新し、都度動作確認を行うことをお勧めします。
その他のパッケージのインストール
ncu -uコマンドはpackage.jsonファイルを書き換えるだけです。更新されたpackage.jsonの内容に従って、実際にパッケージをインストール（またはアップデート）するには、以下のコマンドを実行します。
npm i
これで、指定したバージョンのパッケージがnode_modulesにインストールされます。
メジャーバージョンへのアップデートに伴う確認事項
Next.jsのようなフレームワークのメジャーアップデートでは、単にパッケージバージョンを上げるだけでなく、変更後に問題なく動作するのかの確認も必ず行ってください。
まとめ
今回はnpm-check-updatesを利用してNext.js v14からv15へアップデートする手順を紹介しました。
- npm outdated や ncu で更新可能なバージョンを確認する
- ncu -u [package-name] で package.json を更新する（段階的な更新を行う）
- npm install で実際にパッケージをインストールする
- 開発環境での動作確認やビルド、テストを入念に行う
この記事が、皆さんのライブラリアップデート作業の一助となれば幸いです。