Nuxt を Next.js に移行する

なぜチームが Nuxt から Next.js に移行しているのか

Nuxt 3 はアップグレードパスのはずだった。代わりに、多くの Vue チームが真剣に React を検討し始めた瞬間になった。

Nuxt 2 から Nuxt 3 への移行は実質的に書き直しである。Vue 2 から Vue 3 への破壊的な変更、Options API から Composition API へ、webpack から Vite へ、Vuex から Pinia へ、古いモジュールシステムから Nitro へ — スコープは劇的である。そしてどうせフロントエンドを書き直すのであれば、より大きなエコシステム、より簡単な採用市場、より強いエンタープライズバッキングを持つフレームワークに書き直すべきかどうか検討する価値があります。

それは私たちが毎週チームと持つ会話です。ますます、答えは Next.js です。

移行を推進している Nuxt の問題点

Nuxt 2 はサポート終了

Nuxt 2 は Vue 2 で動作し、2023 年 12 月にサポートが終了しました。セキュリティパッチはもうありません。バグ修正もありません。毎月その上で本番アプリを実行している限り、技術的負債を積み上げています。

Nuxt 3 の移行はどうせ書き直し

ここでスコープについて正直に言いましょう。Nuxt 3 は段階的なアップグレードではなく、根本的に異なるフレームワークです。buildModules キーはなくなりました。static/ ディレクトリは public/ になりました。Vuex は廃止され、Pinia が採用されました。すべての mixin は composable になる必要があります。テンプレート ref の動作は異なります。サーバーミドルウェアは Nitro によって完全に置き換えられました。

チームは通常、中程度のサイズの Nuxt 2 アプリを Nuxt 3 に到達させるだけで、3〜6 ヶ月の移行作業を報告しています。本質的に書き直しであるものに時間と予算を費やしている場合、少なくともすべてのオプションを最初に評価してください。

Vue エコシステムのギャップ

Vue は良いフレームワークです。しかし、エコシステムの数字は嘘をつきません。React パッケージの npm ダウンロード数は Vue 相当品を 5 〜 10 倍上回ります。求人情報では React は Vue を約 4:1 の比率で上回ります。コンポーネントライブラリエコシステム — Radix、shadcn/ui、Headless UI — は React に大きく傾いています。特定の統合が必要な場合、React はほぼ常により多くのオプションとより保守されたパッケージを持っています。

モジュール互換性の問題

Nuxt 2 モジュールは Nuxt 3 で動作しません。モジュール作成 API は完全に変わりました。アプリがまだ移植されていないコミュニティモジュールに依存している場合、自分で置き換えを書いています。Next.js はこれを完全に回避します — より広い npm React エコシステムと Next.js 独自のミドルウェアシステムで作業しています。

Next.js があなたに与えるもの

App Router と React Server Components

Next.js 14+ with App Router は React Server Components をボックスから出して出荷します。コンポーネントはデフォルトではサーバーでレンダリングされ、'use client' で明示的にオプトインしない限り、クライアントにゼロ JavaScript を送信します。これは本当のパラダイムシフトです。コンテンツヘビーなサイトの場合、バンドルサイズを大幅に削減し、パフォーマンスを向上させます。

TypeScript ファースト with TSX

Vue Single File Components は <script setup lang="ts"> で TypeScript サポートを向上させていますが、React の TSX はより自然な TypeScript エクスペリエンスです。defineProps ジェネリクスの体操はなく、withDefaults の回避策もありません。型は予想通りに JSX を通じてフローします。

Vercel のインフラストラクチャ

Vercel 上の Next.js は、ほぼゼロコンフィグでエッジ関数、ISR、画像最適化、分析を提供します。すべての PR でデプロイメントをプレビューします。自動パフォーマンス監視。他のホスティングプラットフォームはこのレベルの Next.js との統合に近づいていません。

採用の利点

シニア Vue 開発者を見つけることは本当に難しいです。シニア React 開発者を見つけることははるかに簡単です。チームをスケールしている場合、その才能プール差は多くの話題になります。Next.js に移行すると、採用パイプラインが大幅に広がります。

私たちの Vue から React への翻訳プロセス

Vue アプリケーションを React に翻訳するための体系的なアプローチを構築しました。各 Vue パターンがどのようにマップされるかは以下の通りです。

コンポーネント翻訳

Vue SFC → TSX Components。 各 .vue ファイルは .tsx ファイルになります。<template> ブロックは return ステートメントの JSX になります。<script setup> ブロックは関数本体になります。<style scoped> ブロックは CSS Modules または Tailwind ユーティリティクラスに移動します。

Composition API → React Hooks。 ref() は useState() になります。computed() は useMemo() になります。watch() は useEffect() になります。onMounted() は useEffect(() => {}, []) になります。Composables はカスタムフックになります。メンタルモデルはクリーンに転送されます。

Template Directives → JSX Expressions。 v-for は .map() になります。v-if は三項演算子または logical AND（&&）になります。v-show は条件付きスタイルオブジェクトになります。v-model は controlled component パターン with value and onChange になります。v-bind は spread props になります。

Pinia/Vuex → Zustand または Context。 グローバルステート管理は複雑なステートの場合は Zustand に、よりシンプルな場合は React Context + useReducer に翻訳されます。Server Components を使用すると、多くのステート管理パターンは不要になります — データ取得はサーバーに移動します。

ルーティング翻訳

Nuxt のファイルベースルーティングは Next.js App Router の規約に直接マップされます。

• pages/index.vue → app/page.tsx
• pages/blog/[slug].vue → app/blog/[slug]/page.tsx
• pages/[...slug].vue → app/[...slug]/page.tsx
• layouts/default.vue → app/layout.tsx
• middleware/auth.ts → root の middleware.ts

Nuxt の useAsyncData と useFetch composables は、データを直接フェッチする非同期 Server Components、またはクライアント側のデータ取得用の React Query に翻訳されます。

モジュール相当品

Nuxt Module	Next.js Equivalent
@nuxt/image	next/image（ビルトイン）
@nuxtjs/i18n	next-intl
@nuxtjs/auth	NextAuth.js
@pinia/nuxt	Zustand / Jotai
@nuxt/content	MDX + contentlayer
nuxt-seo-kit	Next.js Metadata API

SEO 保存戦略

フレームワークを移行しながら検索ランキングを失わないことはオプションではありません。これは私たちのプロセスです。

1. 完全な URL 監査。 インデックス付きのすべての URL をクロールし、新しいルーティング構造にマップします。Nuxt と Next.js はどちらもファイルベースルーティングを使用しているため、ほとんどのパスは 1:1 で転送されます。
2. 301 リダイレクトマップ。 変更される URL は next.config.js またはミドルウェアで永続リダイレクトを取得します。起動前にすべてのリダイレクトを確認します。
3. メタデータの同等性。 Nuxt の useHead() または useSeoMeta() 呼び出しはすべて Next.js の generateMetadata 関数に翻訳されます。タイトルタグ、説明、Open Graph タグ、構造化データを監査します。
4. カノニカルタグとサイトマップ。 next-sitemap で XML サイトマップを生成し、すべてのページでカノニカル URL が正しいことを確認します。
5. Core Web Vitals の向上。 移行自体は通常 CWV スコアを改善します — Server Components は JavaScript ペイロードを削減し、LCP と INP を改善します。それは無料で得られる素晴らしい SEO テールウインドです。
6. 移行後の監視。 Google Search Console の移行後 90 日間を追跡し、クロールエラー、インデックス低下、またはランキング変動を監視します。

タイムラインと価格設定

移行タイムラインはアプリケーションの複雑さによって異なります。

• 小規模アプリ（10 〜 30 ページ、最小限のステート）: 3 〜 5 週間、$8,000 から開始
• 中規模アプリ（30 〜 100 ページ、API 統合、認証）: 6 〜 10 週間、$18,000 から開始
• 大規模アプリ（100+ ページ、複雑なステート、カスタムモジュール）: 12 〜 20 週間、$35,000 から開始

すべてのプロジェクトは無料の移行監査から始まります — Nuxt アプリケーションをインベントリし、リスク領域にフラグを立て、詳細なスコープ見積もりを提供します。コンポーネント別にコンポーネントを翻訳し、各ステップでパリティをテストします。大規模な一括書き直しはありません。段階的で検証可能な進行。

なぜこの移行に Social Animal を選ぶのか

私たちは Vue を実際に知っている Next.js エージェンシーです。当社のチームは本番 Nuxt アプリケーションを出荷し、フレームワークの規約を理解しています。これは、単にコードを音訳するだけでなく、Next.js パターンが意図された方法で使用される慣用的な React に翻訳することを意味します。

データ取得が属しているサーバー Component。インタラクティビティが要求する場合のみクライアント Component。適切な loading.tsx と error.tsx 境界。Suspense でのストリーミング。正しく実装された Next.js App Router — Vue アプリを React 構文に気まずく絞り込んだものではなく。