Nuxt 4.0が登場！ 🎉
1年間の実世界でのテストを経て、Nuxt 4の公式リリースを発表できることを嬉しく思います。これは安定性に焦点を当てたメジャーリリースであり、開発者体験を向上させるためにいくつかの思慮深い破壊的変更が導入されています。
これまで追随してくださった方々には、これらの機能や変更の多くは見慣れたものかもしれません。初めての方々には、これらの変更を歓迎していただけることを願っています。
🔥 新機能は？
Nuxt 4は、開発体験をよりスムーズにすることに特化しています。
- 新しい
app/ディレクトリ構造によるクリーンなプロジェクト構成 - よりスマートなデータフェッチ - データレイヤーのいくつかの矛盾に対処し、パフォーマンスを向上させる機会を捉えました。
- プロジェクト内の異なるコンテキスト（アプリコード、サーバーコード、
shared/フォルダー、および構成）間のプロジェクトベースの分離によるより良いTypeScriptサポート - 内部ソケットの採用と高速なCLIによる高速なCLIと開発
なぜこれらの機能が特に選ばれたのでしょうか？主な理由は、これらの改善が技術的に破壊的な変更を必要としたためです。
一般的に、私たちはリリースに対して誇大広告のないアプローチを目指しています。大きなリリースに向けて機能を貯め込むのではなく、Nuxt 3のマイナーリリースで改善を継続的に提供してきました。
また、これらの変更を後方互換性のある方法で実装する方法を検討するために多くの時間を費やしました。これにより、ほとんどのNuxt 3プロジェクトが最小限の労力でアップグレードできることを願っています。
開始する前に、アプリケーションのどの領域が影響を受ける可能性があるかを理解するために、アップグレードガイドを熟読することをお勧めします。
🗂️ 新しいプロジェクト構造
最も大きな目に見える変更は、プロジェクトの整理方法です。アプリケーションコードは、デフォルトでapp/ディレクトリに配置されます。
my-nuxt-app/
├─ app/
│ ├─ assets/
│ ├─ components/
│ ├─ composables/
│ ├─ layouts/
│ ├─ middleware/
│ ├─ pages/
│ ├─ plugins/
│ ├─ utils/
│ ├─ app.vue
│ ├─ app.config.ts
│ └─ error.vue
├─ content/
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.ts
これにより、コードがnode_modules/や.git/から分離され、ファイルウォッチャーが高速化されます（特にWindowsとLinux）。また、IDEにクライアントコードとサーバーコードのどちらを扱っているかについて、より良いコンテキストを提供します。
🎨 更新されたUIテンプレート
Nuxtのスターターテンプレートは、アクセシビリティの向上、デフォルトのタイトル、テンプレートの洗練が施され、一新されました。#27843).
🔄 よりスマートなデータフェッチ
useAsyncDataとuseFetchがより良く機能するように改善しました。同じキーを使用する複数のコンポーネントは、データを自動的に共有するようになりました。コンポーネントがアンマウントされる際の自動クリーンアップもあり、必要に応じて反応性のあるキーを使用してデータを再フェッチできます。さらに、キャッシュされたデータがいつ使用されるかについて、より詳細な制御が可能になりました。
これらの機能の一部は、段階的に展開してきたため、Nuxt v3のマイナーリリースですでに利用可能になっています。Nuxt v4では異なるデフォルトが導入され、今後もこのデータレイヤーの開発を継続する予定です。
🔧 より良いTypeScript体験
Nuxtは、アプリコード、サーバーコード、shared/フォルダー、およびビルダーコード用に個別のTypeScriptプロジェクトを作成するようになりました。これにより、異なるコンテキストで作業する際のオートコンプリートが改善され、より正確な型推論、そして混乱を招くエラーが減少するはずです。
tsconfig.jsonファイルが1つだけ必要になります！これはおそらくアップグレード時に最も驚きをもたらす問題ですが、長期的にはTypeScriptの体験をはるかにスムーズにするはずです。遭遇した問題は報告してください。🙏
⚡ より高速なCLIと開発
v4のリリースと並行して、@nuxt/cliの高速化に取り組んできました。
- より高速なコールドスタート - 開発サーバーの起動が著しく高速化
- Node.jsコンパイルキャッシュ - v8コンパイルキャッシュの自動再利用
- ネイティブファイル監視 -
fs.watchAPIを使用し、システムリソースを削減 - ソケットベースの通信 - CLIとVite開発サーバーが、ネットワークポートではなく内部ソケットを介して通信するようになり、特にWindowsでのオーバーヘッドを削減
これらの改善を組み合わせることで、日々の開発体験に本当に顕著な違いをもたらすことができ、さらなる計画もあります。
🚀 アップグレード方法
メジャーリリースは常に破壊的変更を伴いますが、今回のリリースの主な目標の1つは、アップグレードパスを可能な限りスムーズにすることです。ほとんどの破壊的変更は、1年以上前から互換性フラグでテスト可能でした。
ほとんどのプロジェクトはスムーズにアップグレードできるはずですが、注意すべき点がいくつかあります。
@nuxt/kitからNuxt 2の互換性が削除されました。（これは特にモジュール作成者に影響します。）- いくつかのレガシーユーティリティと非推奨の機能がクリーンアップされました。
- 新しいTypeScriptのセットアップにより、以前は隠されていたいくつかの型問題が表面化する可能性があります。
- 一部のモジュールは、Nuxt 4との完全な互換性のためにさらなる更新が必要になる場合があります。
ただし、心配はいりません。ほとんどの破壊的変更については、慣れるまでの間、以前の動作に戻すための構成オプションが用意されています。
1. Nuxtを更新する
アップグレードの推奨事項は、次を実行することです。
npx nuxt upgrade --dedupe
これにより、ロックファイルも重複排除され、特にunjsエコシステムにおいて、Nuxtが依存する他の依存関係からの更新を取り込むのに役立ちます。
2. オプション: 移行ツールを使用する
また、Codemodと提携し、すべての移行ステップではないものの、多くのステップを自動化しました。
npx codemod@latest nuxt/4/migration-recipe
yarn dlx codemod@latest nuxt/4/migration-recipe
pnpm dlx codemod@latest nuxt/4/migration-recipe
bun x codemod@latest nuxt/4/migration-recipe
3. テストと調整
テストを実行し、すべてが正しくビルドされることを確認し、発生した問題を修正します。アップグレードガイドには、特定のシナリオに関する詳細な移行手順が記載されています。
アップグレードを開始する前に、アプリケーションのどの領域が影響を受ける可能性があるかを理解するために、全文を読み通すことをお勧めします。
🗺️ 次は何が来るのか？
発生した問題に対処するため、迅速なパッチリリースを計画しています。Nuxt 3は2026年1月末までメンテナンスアップデート（バグ修正とNuxt 4からの機能のバックポートの両方）を受け続けるため、移行に時間が必要な場合でも焦る必要はありません。
今後は、さらに優れたパフォーマンスを実現するNitro v3とh3 v2を搭載し、Vite Environment APIを採用して開発体験を向上させる（そして高速化する！）Nuxt 5をより早期にリリースする予定です。そして、他にも多くの計画があります！
そして、メジャーリリースとは別に、SSRストリーミングのサポート（#4753）、ファーストパーティのアクセシビリティモジュール（#23255）、組み込みのフェッチキャッシュ戦略（#26017）、より強力に型付けされたフェッチ呼び出し（Nitro v3に搭載予定）、動的ルーティング検出（#32196）、マルチアプリサポート（#21635）など、Nuxt 3.xおよび4.xのリリースブランチに多くのエキサイティングな機能を組み込む予定です。
❤️ ありがとうございます
このリリースは、多くの人々の功績であり、特に過去1年間v4互換モードをテストしてくださった方々に感謝します。本当に感謝しています。ご協力ありがとうございました！
Nuxt 4での楽しいコーディングを！🚀
📑 全リリースノート
このリリースに参加してくださったすべての方々に心からの感謝を。❤️