どうも、わたしです。

先日、Nuxtのバージョン4がリリースされたことに、数ヶ月経ってから気づきました。
告知はあったようですが、知らないところでいつの間にかひっそりと公開されていて、少しばかり驚いています。
Nuxt 3のリリースから約2年半ぶりのメジャーバージョンアップだそうです。

メジャーバージョンアップと聞くと、多くの破壊的変更が伴うのが常で、正直なところ「面倒だなーーー」という感情が先に立ちました。
しかし、どうせいつかは対応しないといけないので、少しばかり重い腰を上げて、移行作業に取り掛かることにしました。

公式のロードマップ🔗に目を通すと、近々Nuxt5のリリースも控えてそうな雰囲気で、今回のv4は、v5へ向けた地ならし、つまり一度破壊的変更のステップを踏んでおくためのリリースみたいです。

Nuxt 3から4への移行、所感とか

結論から言うと、めちゃくちゃスムーズにアップグレードできました。

以前のNuxt 2から3への移行を経験された方なら同意していただけると思うのですが、あれは本当に悪夢でした。
エコシステムの対応は追いついていないし、Composition APIへの移行は思考の根本的な書き換えを要求されるしで、多くの方が移行作業で心を消耗させたはずです。
当時のわたしもその一人でした。

その反動なのか、今回のNuxt 3から4への移行は、驚くほどストレスなく、シンプルに完了しました。
対応が必須となる箇所が少なく、後方互換性もかなり考慮されている印象です。
あの地獄のようなマイグレーション作業を思うと、拍子抜けするほどでした。

やったこと

詳細な手順については、ほぼ公式のアップグレードガイド🔗の通りに進めて問題ありませんでした。

既にNuxt 3の環境がある場合、nuxt.config.tsにfuture.compatibilityVersion: 4を一行書き足すのが最も手軽な方法として紹介されています。
しかし、古いパッケージを使いながら設定だけで新しいバージョンに擬態させるのは、どうにも気持ち悪く、私はこの方法を選びませんでした。

というわけで、パッケージごと更新する、よりクリーンなアプローチを選択しました。
公式で紹介されていたマイグレーション用のコマンドnpx codemod@latest nuxt/4/migration-recipeは、残念ながら私の環境ではうまく動作しませんでした。

やったことは、本当にこれだけです。

1. pnpm i nuxt@^4.0.0 を実行
2. その他、関連ライブラリを最新版に更新
3. ディレクトリ構成を変更

pnpm devを実行して、ローカルサーバーが何事もなかったかのように起動したときは、あっさりすぎて逆にびっくり。
Nuxt 2から3への移行で経験した延々と続くエラーとの格闘は、もう過去のものみたいです。

さいごに

今回のNuxt 4への移行は、過去の経験が嘘のようにスムーズなものでした。
あの時の苦労を思えば、今回の変更は部屋の模様替え程度の軽微な作業だったと言えます。

しかし、前述の通り、これは数ヶ月後にリリースが予定されているNuxt 5への布石に過ぎないようです。
この束の間の平穏がいつまで続くのかは分かりませんが、とりあえずは最新の環境で運用できることに満足しています。

みさなんも、メジャーアップデートと聞いて身構えず、早めに対応しておくのがよさそうです。
それでは。