Migrate Nuxt to Next.js

Por que os Times Estão Migrando de Nuxt para Next.js

Nuxt 3 era supostamente o caminho de upgrade. Em vez disso, se tornou o momento em que muitos times Vue começaram a olhar seriamente para React.

A migração de Nuxt 2 para Nuxt 3 é efetivamente uma reescrita. Breaking changes de Vue 2 para Vue 3, Options API para Composition API, webpack para Vite, Vuex para Pinia, o antigo sistema de módulos para Nitro — o escopo é brutal. E se você está reescrevendo seu frontend de qualquer forma, vale a pena questionar se deveria reescrever em um framework com um ecossistema maior, um mercado de contratação mais fácil e suporte empresarial mais forte.

Essa é a conversa que temos com times toda semana. Cada vez mais, a resposta é Next.js.

Os Pontos de Dor do Nuxt Impulsionando a Migração

Nuxt 2 É End-of-Life

Nuxt 2 roda em Vue 2, que chegou ao fim de vida em dezembro de 2023. Sem mais patches de segurança. Sem mais correções de bugs. A cada mês que você roda um app em produção nele, você está acumulando débito técnico.

Migração de Nuxt 3 É uma Reescrita de Qualquer Forma

Sejamos honestos sobre o escopo aqui. Nuxt 3 não é um upgrade incremental — é um framework fundamentalmente diferente. A chave buildModules desapareceu. O diretório static/ agora é public/. Vuex saiu, Pinia entrou. Cada mixin precisa se tornar um composable. Template refs se comportam diferentemente. O server middleware é completamente substituído por Nitro.

Times tipicamente relatam 3-6 meses de trabalho de migração para apps Nuxt 2 de tamanho médio apenas para chegar ao Nuxt 3. Se você está gastando esse tempo e orçamento no que é essencialmente uma reescrita, deveria pelo menos avaliar todas suas opções primeiro.

A Lacuna do Ecossistema Vue

Vue é um bom framework. Mas os números do ecossistema não mentem. Downloads de npm para pacotes React superam equivalentes Vue por 5-10x. React supera Vue em postagens de emprego por aproximadamente 4:1. O ecossistema de bibliotecas de componentes — Radix, shadcn/ui, Headless UI — se inclina muito para React. Quando você precisa de uma integração específica, React quase sempre tem mais opções e pacotes melhor mantidos.

Problemas de Compatibilidade de Módulos

Módulos Nuxt 2 não funcionam no Nuxt 3. A API de autoria de módulos mudou completamente. Se seu app depende de módulos da comunidade que não foram portados, você está escrevendo substituições por conta própria. Next.js contorna isso inteiramente — você está trabalhando com o ecossistema React npm mais amplo e o próprio sistema de middleware do Next.js.

O Que Next.js Oferece

App Router e React Server Components

Next.js 14+ com o App Router envia React Server Components nativamente. Componentes renderizam no servidor por padrão, enviando zero JavaScript para o cliente a menos que você explicitamente opte por 'use client'. Esse é um verdadeiro shift de paradigma. Para sites com muito conteúdo, reduz drasticamente o tamanho do bundle e melhora a performance.

TypeScript-First com TSX

Vue Single File Components melhoraram o suporte TypeScript com <script setup lang="ts">, mas TSX em React é uma experiência TypeScript mais natural. Sem ginástica de genéricos defineProps, sem workarounds withDefaults. Types fluem através de JSX da forma que você espera.

Infraestrutura da Vercel

Next.js na Vercel oferece funções edge, ISR, otimização de imagens e analytics com basicamente zero config. Deployments de preview em cada PR. Monitoramento automático de performance. Nenhuma outra plataforma de hosting chega perto desse nível de integração com Nuxt.

A Vantagem de Contratação

Encontrar desenvolvedores Vue sênior é genuinamente difícil. Encontrar desenvolvedores React sênior é muito mais fácil. Se você está escalando um time, essa diferença de pool de talentos importa bastante. Mover para Next.js abre sua pipeline de contratação consideravelmente.

Nosso Processo de Tradução Vue-para-React

Construímos uma abordagem sistemática para traduzir aplicações Vue para React. Aqui está como cada padrão Vue mapeia:

Tradução de Componentes

Vue SFC → Componentes TSX. Cada arquivo .vue se torna um arquivo .tsx. O bloco <template> se torna JSX na instrução return. O bloco <script setup> se torna o corpo da função. O bloco <style scoped> se move para CSS Modules ou classes de utilidade Tailwind.

Composition API → React Hooks. ref() se torna useState(). computed() se torna useMemo(). watch() se torna useEffect(). onMounted() se torna useEffect(() => {}, []). Composables se tornam custom hooks. O modelo mental se transfere limpamente.

Template Directives → Expressões JSX. v-for se torna .map(). v-if se torna operadores ternários ou AND lógico (&&). v-show se torna objetos de style condicionais. v-model se torna padrões de componentes controlados com value e onChange. v-bind se torna spread props.

Pinia/Vuex → Zustand ou Context. Gerenciamento de estado global se traduz para Zustand para estado complexo, ou React Context + useReducer para casos mais simples. Com Server Components, muitos padrões de gerenciamento de estado se tornam desnecessários — busca de dados se move para o servidor.

Tradução de Roteamento

O roteamento baseado em arquivo do Nuxt mapeia diretamente para convenções do App Router do Next.js:

• 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 na raiz

Os composables useAsyncData e useFetch do Nuxt se traduzem para Server Components assíncronos que buscam dados diretamente, ou React Query para busca de dados no lado do cliente.

Equivalentes de Módulos

Módulo Nuxt	Equivalente Next.js
@nuxt/image	next/image (nativo)
@nuxtjs/i18n	next-intl
@nuxtjs/auth	NextAuth.js
@pinia/nuxt	Zustand / Jotai
@nuxt/content	MDX + contentlayer
nuxt-seo-kit	Next.js Metadata API

Estratégia de Preservação de SEO

Migrar frameworks sem destruir suas classificações de busca não é opcional. Aqui está nosso processo:

1. Auditoria de URL completa. Rastreamos cada URL indexada e a mapeamos para a nova estrutura de roteamento. Nuxt e Next.js usam roteamento baseado em arquivo, então a maioria dos caminhos se transferem 1:1.
2. Mapa de redirecionamento 301. Qualquer URL que muda recebe um redirecionamento permanente em next.config.js ou middleware. Verificamos cada redirecionamento antes do lançamento.
3. Paridade de metadata. Cada chamada useHead() ou useSeoMeta() em Nuxt se traduz para a função generateMetadata do Next.js. Auditamos title tags, descrições, tags Open Graph e dados estruturados.
4. Tags canônicas e sitemaps. Geramos sitemaps XML com next-sitemap e verificamos que URLs canônicas estão corretas em todas as páginas.
5. Melhoria de Core Web Vitals. A migração em si tipicamente melhora as pontuações CWV — Server Components reduzem a carga de JavaScript, que melhora LCP e INP. Esse é um nice SEO tailwind que você ganha de graça.
6. Monitoramento pós-lançamento. Rastreamos Google Search Console por 90 dias pós-migração, observando erros de rastreamento, quedas de indexação ou flutuações de classificação.

Timeline e Preços

Timelines de migração dependem de quão complexa sua aplicação é:

• Apps pequenos (10-30 páginas, estado mínimo): 3-5 semanas, começando em $8,000
• Apps médios (30-100 páginas, integrações de API, auth): 6-10 semanas, começando em $18,000
• Apps grandes (100+ páginas, estado complexo, módulos customizados): 12-20 semanas, começando em $35,000

Cada projeto começa com uma auditoria de migração gratuita — inventariamos sua aplicação Nuxt, sinalizamos as áreas de risco e oferecemos uma estimativa de escopo detalhada. Traduzimos componente por componente, testando paridade em cada passo. Sem rewrites big-bang. Progresso incremental e verificável.

Por que Social Animal para Essa Migração

Somos uma agência Next.js que realmente entende Vue. Nosso time enviou aplicações Nuxt em produção e entende as convenções do framework. Isso significa que não apenas transliteramos seu código — traduzimos para React idiomático que usa padrões Next.js da forma que são feitos para ser usados.

Server Components onde a busca de dados pertence. Client Components apenas onde interatividade exige. Limites adequados loading.tsx e error.tsx. Streaming com Suspense. O Next.js App Router feito certo — não um app Vue desajeitadamente espremido em sintaxe React.