April 19, 2025

パッケージのバージョンアップ対応

ブログ作成 Next.js

はじめに

今日の記事は、本ブログで利用しているパッケージのバージョンアップについてです。ITサービスを運用していたら必ず発生する作業ですが、恥ずかしながらやったことがなく作業内容や苦労を知っておくべきということで今回挑戦しました。

パッケージのバージョンアップ

ゼロから計画すると大変かつ時間がかかるので、計画はAIエディタにしてもらいました。この時点で苦労を半減していると思いますが、今時はこうやるのかなと思ってやったので目を瞑ってください。

今回のやり方は

pnpm outdatedで出力されたパッケージを対象とする
まとめてやると大変なため、パッケージの更新は1つもしくは依存関係の深い少数の単位で実施する

あたりを指定して計画してもらいました。

そうすると、

Next.js関連
React関連
ビルドツール関連（tailwind）
コンテンツ処理関連
その他

といった形で重要度に応じて場合わけをしてくれました。各段階では、

パッケージ追加

pnpm add <パッケージ名>@<latest or version>

クリーンインストール

rm -rf node_modules
rm pnpm-lock.yaml
pnpm install

リントチェック
```
pnpm lint
```
ビルドチェック
```
pnpm build
```
起動確認
```
pnpm dev
```
コミット

つまったところ

Next.js v14 -> v15
- v15からはparamsはPromiseで受け取る形になったので修正が必要です
- こちらの記事を元に修正しました
React 19
- VFCが非推奨になったのでFCを使用するようにしました
tailwind 4
- Error: Package subpath './nesting' is not defined by "exports"
- 解消できず、、仕方なくマイナーバージョンアップした3.4.1にしました
nodeをv18からv20に
- 最後CloudFlareへのデプロイで失敗し、原因究明したところ依存関係の都合でバージョンアップが必要になりました
- v22ではcontentlayerでassertが使われてビルドに失敗するので諦めました
- CloudFlareの環境変数にNODE_VERSIONでバージョンを指定することで解消できます

renovateの導入

毎回やるのは大変なため、継続的にできるようにrenovateを導入してみました。別のプロジェクトで使っているのを見かけたことがあり、前から使ってみたかったやつです。

導入は[GitHub] Renovate の導入と設定が参考になります。簡単に言うと、

Github AppsでRenovateをインストールする
リポジトリを選択してアクセスを許可する
Renovateがrenovate.jsonを作成してPRを出してくれるので、適宜ファイルを修正してマージする

といった作業をします。Renovateの設定は↓のようにしました。

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:base", ":timezone(Asia/Tokyo)"],
  "schedule": ["after 9am on monday", "before 12am on monday"],
  "major": {
    "enabled": false
  }
}

自分で入れた設定としては、

毎週月曜日にPRを作るようにする
- 祝日だと気が散るため
タイムゾーンを東京に
- デフォルトがUTCでスケジュールが意図したものからずれてしまうため
メジャーバージョンアップを除外
- contentlayerがネックになって気軽にメジャーバージョンアップができないため

になります。早速バージョンを指摘してくれてマージしました。便利ですね。これで継続的にバージョンアップしていけたらなと思っています。

おわりに

以上でバージョンアップの対応が完了しました。AIエディタのおかげで計画やバージョンアップによって発生したエラーの解消も比較的楽でした。ただ、万能なわけではないのでやっぱり自分で調べてといったことももちろん必要になります。後悔している点としては、重要なパッケージのバージョンアップは最後でも良かったことです。先にバージョンアップをしてしまったせいで、peer dependeicsでIssueが発生し、このパッケージはnext.jsが対応していない、reactが対応していないとWARNが出るようになってしまいました。contentlayerはなかなかの曲者だったのでこう言うネックを先に炙り出してからやれるようになっていきたいです。

それでも重要フレームワークのメジャーバージョンアップ対応とかのいったんに触れられたのでいい経験になりました。皆さんもAIに頼りながら楽してパッケージを更新していきましょう。

最後まで読んでいただきありがとうございました。