Migrate Nuxt to Next.js

Why Teams Are Moving From Nuxt to Next.js

Nuxt 3 was supposed to be the upgrade path. Instead, it became the moment where a lot of Vue teams started seriously looking at React.

The Nuxt 2 to Nuxt 3 migration is effectively a rewrite. Vue 2 to Vue 3 breaking changes, Options API to Composition API, webpack to Vite, Vuex to Pinia, the old module system to Nitro — the scope is brutal. And if you're rewriting your frontend anyway, it's worth asking whether you should rewrite into a framework with a larger ecosystem, an easier hiring market, and stronger enterprise backing.

That's the conversation we have with teams every week. Increasingly, the answer is Next.js.

The Nuxt Pain Points Driving Migration

Nuxt 2 Is End-of-Life

Nuxt 2 runs on Vue 2, which hit end of life in December 2023. No more security patches. No more bug fixes. Every month you're running a production app on it, you're piling up technical debt.

Nuxt 3 Migration Is a Rewrite Anyway

Let's be honest about the scope here. Nuxt 3 isn't an incremental upgrade — it's a fundamentally different framework. The buildModules key is gone. The static/ directory is now public/. Vuex is out, Pinia is in. Every mixin needs to become a composable. Template refs behave differently. The server middleware is completely replaced by Nitro.

Teams typically report 3-6 months of migration work for medium-sized Nuxt 2 apps just to reach Nuxt 3. If you're spending that time and budget on what's essentially a rewrite, you should at least evaluate all your options first.

The Vue Ecosystem Gap

Vue's a good framework. But the ecosystem numbers don't lie. npm downloads for React packages outpace Vue equivalents by 5-10x. React outnumbers Vue in job postings by roughly 4:1. The component library ecosystem — Radix, shadcn/ui, Headless UI — skews heavily React. When you need a specific integration, React almost always has more options and better-maintained packages.

Module Compatibility Issues

Nuxt 2 modules don't work in Nuxt 3. The module authoring API changed completely. If your app depends on community modules that haven't been ported, you're writing replacements yourself. Next.js sidesteps this entirely — you're working with the broader npm React ecosystem and Next.js's own middleware system.

What Next.js Gives You

App Router and React Server Components

Next.js 14+ with the App Router ships React Server Components out of the box. Components render on the server by default, sending zero JavaScript to the client unless you explicitly opt in with 'use client'. That's a real paradigm shift. For content-heavy sites, it dramatically cuts bundle size and improves performance.

TypeScript-First with TSX

Vue Single File Components have gotten better TypeScript support with <script setup lang="ts">, but TSX in React is a more natural TypeScript experience. No defineProps generics gymnastics, no withDefaults workarounds. Types just flow through JSX the way you'd expect.

Vercel's Infrastructure

Next.js on Vercel gives you edge functions, ISR, image optimization, and analytics with basically zero config. Preview deployments on every PR. Automatic performance monitoring. No other hosting platform comes close to this level of integration with Nuxt.

The Hiring Advantage

Finding senior Vue developers is genuinely hard. Finding senior React developers is much easier. If you're scaling a team, that talent pool difference matters a lot. Moving to Next.js opens up your hiring pipeline considerably.

Our Vue-to-React Translation Process

We've built a systematic approach for translating Vue applications to React. Here's how each Vue pattern maps:

Component Translation

Vue SFC → TSX Components. Each .vue file becomes a .tsx file. The <template> block becomes JSX in the return statement. The <script setup> block becomes the function body. The <style scoped> block moves to CSS Modules or Tailwind utility classes.

Composition API → React Hooks. ref() becomes useState(). computed() becomes useMemo(). watch() becomes useEffect(). onMounted() becomes useEffect(() => {}, []). Composables become custom hooks. The mental model transfers cleanly.

Template Directives → JSX Expressions. v-for becomes .map(). v-if becomes ternary operators or logical AND (&&). v-show becomes conditional style objects. v-model becomes controlled component patterns with value and onChange. v-bind becomes spread props.

Pinia/Vuex → Zustand or Context. Global state management translates to Zustand for complex state, or React Context + useReducer for simpler cases. With Server Components, a lot of state management patterns become unnecessary anyway — data fetching moves to the server.

Routing Translation

Nuxt's file-based routing maps directly to Next.js App Router conventions:

• 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 → middleware.ts at root

Nuxt's useAsyncData and useFetch composables translate to async Server Components that fetch data directly, or React Query for client-side data fetching.

Module Equivalents

Nuxt Module	Next.js Equivalent
@nuxt/image	next/image (built-in)
@nuxtjs/i18n	next-intl
@nuxtjs/auth	NextAuth.js
@pinia/nuxt	Zustand / Jotai
@nuxt/content	MDX + contentlayer
nuxt-seo-kit	Next.js Metadata API

SEO Preservation Strategy

Migrating frameworks without tanking your search rankings isn't optional. Here's our process:

1. Full URL audit. We crawl every indexed URL and map it to the new routing structure. Nuxt and Next.js both use file-based routing, so most paths transfer 1:1.
2. 301 redirect map. Any URL that changes gets a permanent redirect in next.config.js or middleware. We verify every redirect before launch.
3. Metadata parity. Every useHead() or useSeoMeta() call in Nuxt translates to the Next.js generateMetadata function. We audit title tags, descriptions, Open Graph tags, and structured data.
4. Canonical tags and sitemaps. We generate XML sitemaps with next-sitemap and verify canonical URLs are correct across all pages.
5. Core Web Vitals improvement. The migration itself typically improves CWV scores — Server Components cut JavaScript payload, which improves LCP and INP. That's a nice SEO tailwind to get for free.
6. Post-launch monitoring. We track Google Search Console for 90 days post-migration, watching for crawl errors, indexing drops, or ranking fluctuations.

Timeline and Pricing

Migration timelines depend on how complex your application is:

• Small apps (10-30 pages, minimal state): 3-5 weeks, starting at $8,000
• Medium apps (30-100 pages, API integrations, auth): 6-10 weeks, starting at $18,000
• Large apps (100+ pages, complex state, custom modules): 12-20 weeks, starting at $35,000

Every project starts with a free migration audit — we inventory your Nuxt application, flag the risk areas, and give you a detailed scope estimate. We translate component by component, testing parity at each step. No big-bang rewrites. Incremental, verifiable progress.

Why Social Animal for This Migration

We're a Next.js agency that actually knows Vue. Our team has shipped production Nuxt applications and understands the framework's conventions. That means we don't just transliterate your code — we translate it into idiomatic React that uses Next.js patterns the way they're meant to be used.

Server Components where data fetching belongs. Client Components only where interactivity demands it. Proper loading.tsx and error.tsx boundaries. Streaming with Suspense. The Next.js App Router done right — not a Vue app awkwardly squeezed into React syntax.