【2025年最新】Nuxt 4で何が変わる？主要な変更点を徹底解説

はじめに

2025年7月15日、待望のNuxt 4.0が正式リリースされました。約1年間のテスト期間を経て、開発者体験（DX）の向上にフォーカスした安定性重視のメジャーアップデートとなっています。

「破壊的変更が多くて移行が大変そう...」と心配している方もいるかもしれませんが、Nuxt 4はNuxt 3からの移行がスムーズに行えるよう設計されています。

今回は、Nuxt 4の主要な変更点を詳しく解説していきます。

1. 新しいディレクトリ構造（app/ディレクトリ）

Nuxt 4で最も大きな変更点は、プロジェクト構造の刷新です。

従来、ルート直下に配置していたcomponents/やpages/などのディレクトリが、新たにapp/ディレクトリの中に移動します。

【Nuxt 4の新しい構造】

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がクライアントコードとサーバーコードを区別しやすくなる

なお、既存のNuxt 3プロジェクト構造もそのまま動作します。Nuxtが自動的に従来の構造を検出し、互換性を維持してくれるため、段階的な移行が可能です。

2. データフェッチングの改善

useAsyncDataとuseFetchに大幅な改善が加えられました。

shallowRefへの変更

最も重要な変更として、データがrefからshallowRefに変更されました。

// Nuxt 3（従来） const { data } = await useFetch('/api/test') data.value.user.name = '新しい名前' // リアクティブに反映される

// Nuxt 4 const { data } = await useFetch('/api/test') data.value.user.name = '新しい名前' // リアクティブに反映されないなぜこの変更が行われたのか？

shallowRefはトップレベルの変更のみを追跡し、ネストされたプロパティの変更は追跡しません。これにより、Vueが全てのプロパティを監視する必要がなくなり、大幅なパフォーマンス向上が実現されます。

APIから取得したデータは通常、表示するだけで直接変更することは稀です。そのため、ほとんどのケースでshallowRefが最適な選択となります。

もしネストされたデータの変更を検知したい場合は、オプションで指定できます：

const { data } = useFetch('/api/user', { deep: true })### dedupeオプションの変更

重複リクエストの制御方法も変更されました。

// Nuxt 3 refresh({ dedupe: true })

// Nuxt 4 refresh({ dedupe: 'cancel' }) // 新しいリクエストをキャンセル refresh({ dedupe: 'defer' }) // 既存のリクエスト完了を待つ### データ共有の標準化

静的サイト生成（SSG）時のデータ共有機能が安定版となりました。同じデータを複数のページで使用する場合、一度取得したデータが自動的に共有され、不要なAPIリクエストが削減されます。

3. TypeScript体験の向上

Nuxt 4では、TypeScriptのサポートが大幅に強化されました。

主な改善点：

• アプリコード、サーバーコード、shared/フォルダ、設定ファイルごとに独立したTypeScriptプロジェクトが作成される

• より正確な型推論とオートコンプリート

• コンテキストに応じた適切なエラー表示

これにより、プロジェクトルートに1つのtsconfig.jsonを置くだけでOKになりました。サーバー用のserver/tsconfig.jsonは不要になります。

// tsconfig.json（Nuxt 4） { "files": [], "references": [ { "path": "./.nuxt/tsconfig.app.json" }, { "path": "./.nuxt/tsconfig.server.json" }, { "path": "./.nuxt/tsconfig.shared.json" }, { "path": "./.nuxt/tsconfig.builder.json" } ] }## 4. CLIと開発サーバーの高速化

開発体験を向上させるため、CLIと開発サーバーが最適化されました。

主な改善点：

• コールドスタートの高速化：開発サーバーの起動が明らかに速くなった

• Node.jsコンパイルキャッシュ：V8コンパイルキャッシュを自動的に再利用

• ネイティブファイルウォッチング：fs.watch APIを使用し、システムリソースの消費を削減

• ソケットベース通信：CLIとVite開発サーバーがネットワークポートではなく内部ソケットで通信（特にWindowsでのオーバーヘッドを削減）

これらの改善により、ビルド時間が20〜30%向上したという報告もあります。

5. コンポーネント名の正規化

Vue DevToolsや<KeepAlive>で表示されるコンポーネント名が、Nuxtの自動インポートと一致するようになりました。

// 例：components/some-folder/MyComponent.vue の場合

Nuxt 3: MyComponent Nuxt 4: SomeFolderMyComponentこれにより、コンポーネントの追跡とデバッグがより直感的になります。

6. sharedディレクトリの追加

新しくshared/ディレクトリが追加されました。このディレクトリ内のコードは、クライアントとサーバーの両方で使用できます。

my-nuxt-app/ ├─ app/ # クライアントサイドコード ├─ server/ # サーバーサイドコード ├─ shared/ # 共通コード（ユーティリティ、型定義など） │ ├─ utils/ │ └─ types/ └─ nuxt.config.ts## Nuxt 3からの移行方法

移行は比較的簡単です。

ステップ1：アップグレード

npx nuxt upgrade --dedupe### ステップ2：自動マイグレーションツールの実行（オプション）

npx codemod@latest nuxt/4/migration-recipeこのコマンドで、多くの移行タスクが自動化されます。

ステップ3：テストと調整

ビルドが正常に完了するか確認し、必要に応じて調整を行います。

重要：Nuxt 3は2026年1月末まで保守アップデートが継続されるため、急いで移行する必要はありません。

今後の展望

Nuxt 4のリリース後、すでにNuxt 4.1（2025年9月）、Nuxt 4.2（2025年10月）がリリースされています。

また、Nuxt 5の開発も進行中です。Nuxt 5では、Nitro v3とh3 v2の採用、Vite Environment APIの導入など、さらなるパフォーマンス向上が予定されています。

まとめ

Nuxt 4は「革命」ではなく「進化」です。主な変更点をまとめると：

✅ 新しいapp/ディレクトリ構造 → プロジェクトの整理とパフォーマンス向上 ✅ shallowRefによるデータフェッチング → 大幅なパフォーマンス改善 ✅ TypeScript体験の向上 → より正確な型推論 ✅ CLI・開発サーバーの高速化 → 日々の開発がより快適に ✅ 後方互換性の維持 → 既存プロジェクトもそのまま動作

Nuxt 3を使っている方は、段階的にNuxt 4への移行を検討してみてください。compatibilityVersion: 4を設定することで、事前にNuxt 4の挙動をテストすることも可能です。

参考リンク

• Nuxt 4公式発表: https://nuxt.com/blog/v4

• アップグレードガイド: https://nuxt.com/docs/4.x/getting-started/upgrade

執筆者（AIも使用） 渡部竜二Website: https://ryu2-w.jp/ インスタ: https://www.instagram.com/ryu2asaka/ X: https://x.com/ryu2asaka

ダウンロード

copy ## いいなと思ったら応援しよう！

チップで応援する