こんにちは、やむぅ。です。
ちょっと前に Nuxt4.0 が正式にリリースされました！
今回は、僕自身のNuxt4移行でやった手順や概要、感じたこと、Nuxt4の主要な新機能や、Nuxt3からの破壊的変更についてお話ししていきます。
新しい機能やパフォーマンスの改善に期待しつつも、「移行って大変そう…」「どこが変わったのかよくわからない」と悩んでいる多いと思います。そんな人に向けた、移行へのイメージやコスト感が掴める内容になっています。
Nuxt3 → Nuxt4移行の所感
正直、めちゃくちゃスムーズにアップグレードできました。
以前の Nuxt2 → Nuxt3 の移行対応はかなり大変で、この記事をみてる方の中にもMigration対応で苦しい思いをした方多いと思います。
ですが今回のNuxt3 → Nuxt4 の移行はそれの反動なのか、対応必須な箇所が少ない、互換性が充実しているので、ストレスなくかつシンプルに移行することができました。
※小さいプロダクトならワンチャン対応不要かも...?
Nuxt4で何が変わった？
Nuxt4での大きな変化としては、
- プロジェクト構造
- データ取得系
この二つが大きく変わりました。
Nuxt4のプロジェクト構造
Nuxt4のプロジェクト(ディレクトリ)構造がガラッと変わりました。
これまではプロジェクト直下に配置していたpagesやcomponentsなどといったディレクトリは、app/内で置くようになりました。
・Nuxt3でのディレクトリ構造
プロジェクト
|- assets/
|- components/
|- composables/
|- layouts/
|- middleware/
|- pages/
|- plugins/
|- public/
|- server/
|- tests/
|- utils/
|- app.vue
|- error.vue
|- nuxt.config.ts
・Nuxt4でのディレクトリ構造
プロジェクト
|- app/
|- assets/
|- components/
|- composables/
|- layouts/
|- middleware/
|- pages/
|- plugins/
|- utils/
|- app.vue
|- error.vue
|- public/
|- server/
|- tests/
|- nuxt.config.ts
こうなったことでクライアント側かサーバー側、どちらに関係するコードなのかがはっきりしました。
僕的には、 Next.js のディレクトリ構造に近づいた感じがして良きです！
※Nuxt3の構造のままでも、自動で既存の構造を検出してこれまでとまったく同じように動作するので必ずこれにしなくても大丈夫です。
データフェッチ系の性能向上
パフォーマンスと一貫性を向上させるためにuseAsyncDataおよびuseFetchが再編成されました。ここはかなり変更(非推奨化)点が多いです。
こちらも、今まで通りで使えるが一部、意図しない挙動やパフォーマンス低下を引き起こす可能性があるので周囲が必要です。
特に、
-
dataとerrorのデフォルト値がundefinedになる -
refresh系の変更 -
pendingの非推奨化 - 同じキーを使ったすべての呼び出しの
data,error,statusの参照を共有化
この部分に注意が必要です。
他の大きな変化
Nuxt4からshared/フォルダが使えるようになりました。これを使うことでクライアントとサーバー間で機能を共有することができます。
※正確にはNuxtv3.14以降から使えるようになった機能です
今までは、UI側で作ったutils,typesはサーバー側では使えませんでした。そのため以下のように同じものをそれぞれに作る必要がありました。
プロジェクト
~~~~
|- server/
|- utils/ - サーバー側でのみ使える
|- types/ - サーバー側でのみ使える
|- utils/ - クライアント側でのみ使える
|- types/ - クライアント側でのみ使える
ですがshared/を使うことで、UI側とサーバー側で同じutil関数や型を使うことができます。
プロジェクト
~~~
|- shared/
|- utils/
|- formatters.ts - クライアント、サーバー両方で使える
|- types/
|- user.d.ts - クライアント、サーバー両方で使える
Nuxt4への移行手順
まずはNuxtを最新にしましょう。
npx nuxt upgrade --dedupe
その後、変更点の対応を行うのですがcodemodを使うことである程度自動で移行することができます。
npx codemod@latest nuxt/4/migration-recipe
このコマンドを実行することでいくつかの移行手順を自動化することができます。
もちろん手動で一つずつ丁寧に行うこともできます。
僕がした手順としては、
- Nuxtを最新化
- 動作確認(互換性でちゃんと動くレベルまで軽く対応)
- 移行用ブランチにマージ
- ディレクトリ構造の移行対応 → マージ
- データフェッチ系の移行対応 → マージ
- 最終動作確認して本番ブランチへマージ
- その他細かい移行対応 → マージ
- shared/などでリファクタリング → マージ → 本番ブランチへ
このように１種類ずつ移行→動作確認という段階を踏んで移行作業を行いました。
ディレクトリ構造は手作業で行い、それ以外はcodemodを使って移行しました。
公式ガイドはこちら
※今回僕は、移行作業に際して以下のようにブランチを分けて作業しました。
・mainブランチ ← 本番
・移行用ブランチ ← 移行確定はここ
|- 作業用ブランチ ← ここで作業
Nuxt4移行の感想
冒頭でもお話しした通り、めちゃくちゃスムーズにアップグレードできました！
以前のNuxt2→Nuxt3アップグレード地獄とは異なり、スルスルとアプデすることができました。
実際には、200ファイル程度のプロジェクトの移行作業が、2人日程度で完了することができました。
なんなら、もっと上手くやれば1.0人日でもできちゃうかも...?と思うレベルでサクッとできました。
まとめ
今回のNuxt4はめちゃくちゃ楽にアップデートすることができました。
やってみた感じ、ディレクトリ構造とデータフェッチ系の変更がほとんどですし、codemodでほぼほぼ自動化できるので負担少なく対応することができました！
もしNuxt3からNuxt4に移行を考えているのであれば、「前の移行よりもずっと楽！」なのでぜひやってみてください。
また、Zennで細かなNuxt4変更点をまとめてみたのでよければこちらもご覧ください。
今回の著者
現役でエンジニアやってるやむぅ。です！
フリーランスエンジニアとして働きながら、 「個人サービス運営」「エンジニアサポート」「YouTube発信」この三つを主軸に活動しています。直近では、「YouTubeをNuxt x FastAPI x MySQLで作ってみた」や「WebニュースのAI分析サービスのリリース」「Twitchクリップの検索・シェアサービスのリリース」をしました。
僕がエンジニアとして、失敗したことや上手くいったこと、実際にやってみたことをもとに書いてるので、ぜひ参考にしてください！
【最後に告知！】定期『ワークショップ』のご案内🔥
「プログラミングを始めたいけど、何から手をつけていいか分からない…」
「本や動画を試したけれど、途中で挫折してしまった…」
「HTML、CSS、JavaScriptの役割がごちゃごちゃになって、全体像が掴めない…」
そんなプログラミング未経験・初心者向けに「プログラミングのイメージを掴む」ことができるワークショップを開催します！
- HTML、CSS の基礎が学べる 「最初の一歩」
- Java/Go/Python の基礎が学べる 「システムエンジニアへの道」
- 流行りのフレームワークReactやVueの実践開発体験
- 人気バックエンドスキルの実践開発体験
…etc とさまざまなワークショップを定期的に開催します。
独学で詰まってる方や、エンジニアのリアルを知りたい・体験したいプログラミング未経験・初心者の方はぜひご参加ください！
お申し込みはこちらから
👉 開催予定のワークショップを確認する(Googleフォームに移動します)
【もひとつ告知！】僕が1 on 1でプログラミング教えます!
AI時代に求められる実務スキル & エンジニアのリアルを網羅したカリキュラムを実際の開発案件をもとに作り上げました！もちろん高校生や大学生も大歓迎で、今、プログラミングスクールを検討している方で、
- Web開発系エンジニアを目指している
- システムエンジニアを目指している
- AI時代でも生きていける技術力を身につけたい
そんな方々を対象とした、エンジニアという仕事に興味を持ち、頑張ってみようと思ったあなたを現役エンジニアが応援・サポートする完全1 on 1スクールですので、こちらぜひご検討ください！
※副業、Web制作を目指している方はお力になれません…ご了承ください。