Nuxt3からNuxt4へ｜何が変わる？メリット・移行方法を3分で解説

  • 投稿日
  • 更新日
  • 著者 竹田奈央
  • カテゴリー Nuxt


※ 本ページはプロモーションが含まれています。

こんにちは。エンジニアのおたっけ〜（@takeda_no_nao）です。

エンジニア｜ポートフォリオ
新人エンジニア

Nuxt4が出るって聞いたけど、Nuxt3のままで別に困ってないし…。

正直、アップデートって面倒だし、影響もわからないから後回しにしよっと。

今回の記事は上記のような方におすすめ。

今回の記事では Nuxt3 → Nuxt4 の重要な変更点を、実コードを交えながらわかりやすく解説していきます。

今までフロントワークフレームワークのバージョンアップで困ったことはありませんか？「バージョンアップは手軽だって聞いてたけど、実際結構大変じゃん…！」と四苦八苦したことのあるあなたへ。Nuxt4への変更がなぜ重要なのか？どこがどう進化したのか？などあなたの疑問にズバッと答えます。

エンジニア｜ポートフォリオ
新人エンジニア

気になる箇所あったらコメントで教えてね。

なおこの記事は3分で読める内容です。

目次
  1. なぜ Nuxt4 へのバージョンアップが今重要なのか？
  2. Nuxt3とNuxt4の主な変更点まとめ【結論ファースト】
  3. 👉Nuxt4への移行方法【コピペOK】
  4. Nuxt4の進化がもたらす3つのメリット✨
  5. よくある誤解・FAQ
  6. まとめ｜Nuxt 4の進化で「パフォーマンスUP」
  7. Nuxt3 → Nuxt4 バージョンアップ｜参考記事

なぜ Nuxt4 へのバージョンアップが今重要なのか？

Nuxt 4はNuxtフレームワークの次期メジャーバージョンです。現時点で、Nuxt 4の公式リリース日は
「後日発表」ととなっているものの、重大な変更が予定されているバージョンであり、以前より注目度が高くなっています。

また、Nuxt2のサポートが2024年6月30日に終了することが発表されている中、依然多くのシステムはNuxt2で動いている状況。今後リプレイス案件の需要が増大することが見込まれます。

エンジニア｜ポートフォリオ
ベテランエンジニア

案件需要増加も踏まえ、今後もNuxt4の動向に注視が必要です。

また今回のようなNuxt4へのバージョンアップを放っておくと、次のような問題に直面しかねません。

  • 🔥将来的なメンテナンスコストが増す
    →先送りにすることで変更箇所が多くなりコストが増大
  • 🔥対応モジュールの選定が難しくなる
    →Nuxt本体のバージョンが古いと対応モジュールのサポートも切れる可能性あり
  • 🔥保守できる人が誰もいなくなる
    →プロジェクトが炎上する原因になる

つまり、今から変更箇所の把握をしておかないと、あとで困る可能性が高いんです。

Nuxt3とNuxt4の主な変更点まとめ【結論ファースト】

変更点をひとことで言うと、大幅なパフォーマンス改善を目的に複数箇所が変更されています。

  • ①useAsyncData, useFetch時のレンダリングデータが共有される
  • ②ディレクトリ構造の大幅変更
  • ③メモリ使用量を改善
  • ④middleware配下は自動スキャン

①useAsyncData, useFetch時のレンダリングデータが共有される

同じキーを持つuseAsyncDataまたはuseFetchのすべての呼び出しは、同じデータ、エラー、およびステータスの参照を共有するようになりました。Nuxt3では実験的な機能がNuxt4では正式採用され、異なるページ間でレンダリングデータを共有できるようになりました。（関連PR）※無効化も可能。

データがキャッシュされることで、パフォーマンスの向上が見込めます。

// composables/useUserData.ts

export function useUserData(userId: string) {
  return useAsyncData(
    `user-${userId}`,
    () => fetchUser(userId),
    { 
      deep: true,
      transform: (user) => ({ ...user, lastAccessed: new Date() })
    }
  )
}

②ディレクトリ構造の大幅変更

現在ディスカッション段階ではありますが、ディレクトリ構造が採用される可能性が高いです。※変更される可能性もあります。（詳細）

Nuxt4フォルダ構成の例

.output/
.nuxt/
app/
assets/
components/
composables/
layouts/
middleware/
pages/
plugins/
utils/
app.config.ts
app.vue
router.options.ts
content/
layers/
modules/
node_modules/
public/
server/
api/
middleware/
plugins/
routes/
utils/
nuxt.config.ts

主な変更としては、Nuxt3の幾つかのフォルダが/app配下に移動されます。フォルダ構成変更の理由としては、すべてのコードをルート直下に置くと、特定OSでの起動が大幅に遅れる可能性が示唆されていたためです。

また、今後はクライアントサイドのコードとサーバーサイドのコードが完全に分離されることで、IDEのサポートが向上するというメリットにも繋がる予定です。

③メモリ使用量を改善

useAsyncData で取得したデータを使用していた最後のコンポーネントがアンマウントされると、Nuxt4ではそのデータを削除して、メモリ使用量が増え続けるのを防ぐように変更されました。

エンジニア｜ポートフォリオ
ベテランエンジニア

速度面の向上に繋がることにもなるため、SEO観点でのパフォーマンス向上も見込めそうです。

④middleware配下は自動スキャン

Nuxt3では、自動でいくつかのフォルダをスキャンしますが、Nuxt4では、middlewareフォルダについても自動スキャンの対象となる予定です。理由としては、plugins配下含むいくつかのフォルダはインデックスファイル用に自動スキャンされるため、動作を一貫させるため、とのこと。

👉Nuxt4への移行方法【コピペOK】

以下の手順で、Nuxt4への移行を大まかに開始できます。

  • ①Nuxt CLIで自動アップグレード
  • ②/app フォルダを作成し中身を移動
  • ③バージョン設定の見直し（nuxt.config.ts）
  • ④共有プリレンダリングデータのキー設定

1、Nuxt CLIで自動アップグレード

$ npx nuxi upgrade

依存関係を更新します。package.json ファイルについて、Nuxtのバージョンが^4.0.0になっていることを確認します。

2、/app フォルダを作成し中身を移動

/app フォルダを作成し、assets/、components/、composables/、layouts/、middleware/、pages/、plugins/ utils/を/appへ移動します。また、app.vue、error.vue、app.config.tsファイルについても/appへ移動します。

⚠️注意点

全てのフォルダを移動するわけではありません。nuxt.config.ts、content/、layers/、modules/、public/ 、server/については/appに移動しないよう注意してください。

エンジニア｜ポートフォリオ
ベテランエンジニア

おおよそ、サーバーサイドは今まで通り、フロントサイドがapp配下に移動になった、と考えるとわかりやすいかもしれません。

3、バージョン設定の見直し（nuxt.config.ts）

下記の記述により、Nuxt 設定全体のデフォルトが Nuxt v4 の動作に適応するように設定されます。

// nuxt.config.ts 

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  ...
})

書き方も非常にシンプルです。

4、共有プリレンダリングデータのキー設定

データのユニークキーが常に同じデータであることを確認してください。例えば、useAsyncDataを使用して特定のページに関連するデータをフェッチする場合、そのデータと一意に一致するキーを設定する必要があります。

// Nuxt3
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

// Nuxt4
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

これにより、例えば、メニューのナビゲーション・データや、CMS からのサイト設定を取得する場合など、このデータが最初のページをプリレンダリングするときに一度だけフェッチされることになり、その後、他のページをプリレンダリングするときに使用するためにキャッシュされ、パフォーマンスが向上します。

Nuxt4の進化がもたらす3つのメリット✨

✅ フェッチ効率化によるパフォーマンスの飛躍的向上

useAsyncDataでのプリレンダリングデータのキャッシュを含め、データフェッチが効率化されています。それに伴い、処理速度の向上が見込めます。これはSEO観点でのパフォーマンス向上にも繋がるので、大きな変更と言えそうです。

✅ コードモッドによる自動移行で作業効率が大幅向上

Nuxt 4への移行に備えて、codemodツールが用意されています。コマンド一つで多くの変更が自動的に行われ、手動でのコード修正の手間が激減します。

移行時にありがちなミスも防げるため、アップグレード作業の安全性・信頼性も高まります。これらの改善は、日々の運用・保守において確実に効果を発揮し、開発者の心理的負担軽減にも繋がりそうです。（詳細）

✅ 開発体験の改善

新しい app/ ベースのディレクトリ構造により、ファイル監視やビルドのパフォーマンスが向上します。

特に フロント側のスキャン対象外ディレクトリがプロジェクトルートにある従来構成では遅延が発生していましたが、新構成ではそれを回避できます。また、server/ などのディレクトリが明確に分離され、IDEによる型補完の精度も向上します。

よくある誤解・FAQ

Q1. Nuxt3からすぐに移行すべき？

A. 無理にすぐではなく、プロジェクト規模と依存モジュールを見て慎重に判断することをおすすめします。
Nuxtには「夜間リリースチャンネル」というものがあります。Nuxt は毎日コミット、改善、バグ修正を行っており、事前に新しい機能や変更等のベータ版を試すことが可能です。それで事前にテストしてみるもの良いかと思います。

Q2. Nuxt3のまま放置して大丈夫？

A. 短期的には問題ないかもしれません。ただし、Nuxt2のサポートが2024年6月30日に終了することが発表されていることもあり、Nuxt3についても同様に中長期的にはモジュールの非対応やLTS切れのリスクがあります。早めにバージョンアップ対応を検討することをおすすめします。

まとめ｜Nuxt 4の進化で「パフォーマンスUP」

以上、Nuxt 4の注目すべき新機能や変更点についてご紹介しました！

  • Nuxt4の進化①：useAsyncData, useFetch時のレンダリングデータが共有される
  • Nuxt4の進化②：ディレクトリ構造の大幅変更
  • Nuxt4の進化③：メモリ使用量を改善
  • Nuxt4の進化④：middleware配下は自動スキャン

Nuxt 3からNuxt 4へのアップグレードは、小さな変更点の積み重ねではなく、開発者体験とアプリパフォーマンスの両立を目指した本質的な進化だと言えます。個人開発者でもチーム開発でも、Nuxt 4の恩恵を受けやすくなっているため、ぜひ本記事を参考に試してみてください！

エンジニア｜ポートフォリオ
新人エンジニア

よし！これなら私にもできるかも…！

📝 Nuxtやフロントエンド技術に興味がある方は、こちらの記事もあわせてどうぞ：

エンジニアとしてのキャリアアップにご興味のある方は「リーダブルコードを読んだら成長が加速した話｜初心者エンジニアの必読書」や「中小SES→フリーランス→年収960万円。マッチングアプリで気づいた“自分だけ年収ヤバい”問題」もあわせてご覧ください！

Nuxt3 → Nuxt4 バージョンアップ｜参考記事


季節特集

  • -
    LINE
  • -
    Pinterest

この記事を書いた人

竹田奈央

フリーランス女性エンジニア｜年収630万円UP＆フルリモートで自由な働き方を実現中

石川県出身・東京都在住。国立大学中退後、工学系の大学校を卒業し、開発歴5年以上。現在はフルリモートで活動するフリーランス女性エンジニアです。

受託開発・SES・自社サービス・上場企業での大規模開発などの開発経験を持ち、柔軟な対応力が強み。アラサーで独立し、単価80万円以上の案件を獲得、年収は630万円以上アップしました。

「地方出身でも」「女性でも」「会社を辞めても」エンジニアとしてキャリアアップできると身をもって実感中。自由な働き方やキャリア形成に興味がある方は、ぜひTwitterまたはLinkedInでお気軽に繋がってください！

記事一覧