Tu sitio Nuxt 2 perdió soporte de seguridad hace seis meses

Por qué los equipos están migrando de Nuxt a Next.js

Se suponía que Nuxt 3 sería la ruta de actualización. En cambio, se convirtió en el momento en que muchos equipos de Vue comenzaron a considerar seriamente React.

La migración de Nuxt 2 a Nuxt 3 es en la práctica una reescritura. Los cambios incompatibles de Vue 2 a Vue 3, de Options API a Composition API, de webpack a Vite, de Vuex a Pinia, del antiguo sistema de módulos a Nitro — el alcance es brutal. Y si de todas formas vas a reescribir tu frontend, vale la pena preguntarse si deberías hacerlo en un framework con un ecosistema más amplio, un mercado de contratación más accesible y un respaldo empresarial más sólido.

Esa es la conversación que tenemos con equipos cada semana. Cada vez más, la respuesta es Next.js.

Los puntos críticos de Nuxt que impulsan la migración

Nuxt 2 llegó al fin de su vida útil

Nuxt 2 se ejecuta sobre Vue 2, que llegó al fin de su vida útil en diciembre de 2023. Sin más parches de seguridad. Sin más correcciones de errores. Cada mes que ejecutas una aplicación en producción sobre él, acumulas deuda técnica.

La migración a Nuxt 3 es una reescritura de todas formas

Seamos honestos sobre el alcance. Nuxt 3 no es una actualización incremental — es un framework fundamentalmente diferente. La clave buildModules desapareció. El directorio static/ ahora es public/. Vuex está fuera, Pinia está dentro. Cada mixin necesita convertirse en un composable. Las refs de plantilla se comportan de forma distinta. El middleware del servidor está completamente reemplazado por Nitro.

Los equipos suelen reportar entre 3 y 6 meses de trabajo de migración para aplicaciones Nuxt 2 de tamaño mediano, solo para llegar a Nuxt 3. Si vas a invertir ese tiempo y presupuesto en lo que es esencialmente una reescritura, al menos deberías evaluar todas tus opciones primero.

La brecha del ecosistema Vue

Vue es un buen framework. Pero los números del ecosistema no mienten. Las descargas en npm de paquetes React superan a los equivalentes de Vue entre 5 y 10 veces. React supera a Vue en ofertas de empleo en una proporción aproximada de 4:1. El ecosistema de bibliotecas de componentes — Radix, shadcn/ui, Headless UI — se inclina fuertemente hacia React. Cuando necesitas una integración específica, React casi siempre tiene más opciones y paquetes mejor mantenidos.

Problemas de compatibilidad de módulos

Los módulos de Nuxt 2 no funcionan en Nuxt 3. La API de creación de módulos cambió por completo. Si tu aplicación depende de módulos de la comunidad que no han sido portados, tendrás que escribir los reemplazos tú mismo. Next.js evita este problema por completo — trabajas con el ecosistema npm de React en su totalidad y con el sistema de middleware propio de Next.js.

Lo que Next.js te ofrece

App Router y React Server Components

Next.js 14+ con el App Router incluye React Server Components de serie. Los componentes se renderizan en el servidor por defecto, enviando cero JavaScript al cliente a menos que optes explícitamente con 'use client'. Eso es un cambio de paradigma real. Para sitios con mucho contenido, reduce drásticamente el tamaño del bundle y mejora el rendimiento.

TypeScript nativo con TSX

Los Single File Components de Vue han mejorado el soporte de TypeScript con <script setup lang="ts">, pero TSX en React es una experiencia TypeScript más natural. Sin malabarismos de genéricos con defineProps, sin soluciones alternativas con withDefaults. Los tipos fluyen a través de JSX tal como esperarías.

La infraestructura de Vercel

Next.js en Vercel te ofrece edge functions, ISR, optimización de imágenes y analítica prácticamente sin configuración. Despliegues de vista previa en cada PR. Monitoreo de rendimiento automático. Ninguna otra plataforma de hosting se acerca a este nivel de integración con Nuxt.

La ventaja en contratación

Encontrar desarrolladores Vue senior es genuinamente difícil. Encontrar desarrolladores React senior es mucho más fácil. Si estás escalando un equipo, esa diferencia en el mercado de talento importa mucho. Migrar a Next.js amplía considerablemente tu pipeline de contratación.

Nuestro proceso de traducción de Vue a React

Hemos desarrollado un enfoque sistemático para traducir aplicaciones Vue a React. Así es como se mapea cada patrón de Vue:

Traducción de componentes

Vue SFC → Componentes TSX. Cada archivo .vue se convierte en un archivo .tsx. El bloque <template> se convierte en JSX dentro del return. El bloque <script setup> se convierte en el cuerpo de la función. El bloque <style scoped> pasa a CSS Modules o clases utilitarias de Tailwind.

Composition API → React Hooks. ref() se convierte en useState(). computed() se convierte en useMemo(). watch() se convierte en useEffect(). onMounted() se convierte en useEffect(() => {}, []). Los composables se convierten en custom hooks. El modelo mental se transfiere de forma natural.

Directivas de plantilla → Expresiones JSX. v-for se convierte en .map(). v-if se convierte en operadores ternarios o AND lógico (&&). v-show se convierte en objetos de estilo condicionales. v-model se convierte en patrones de componentes controlados con value y onChange. v-bind se convierte en spread props.

Pinia/Vuex → Zustand o Context. La gestión de estado global se traduce a Zustand para estados complejos, o React Context + useReducer para casos más simples. Con los Server Components, muchos patrones de gestión de estado se vuelven innecesarios de todas formas — la obtención de datos se traslada al servidor.

Traducción de rutas

El enrutamiento basado en archivos de Nuxt se mapea directamente a las convenciones del App Router de 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 en la raíz

Los composables useAsyncData y useFetch de Nuxt se traducen a Server Components asíncronos que obtienen datos directamente, o a React Query para la obtención de datos en el lado del cliente.

Equivalentes de módulos

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

Estrategia de preservación SEO

Migrar frameworks sin hundir tu posicionamiento en buscadores no es opcional. Este es nuestro proceso:

1. Auditoría completa de URLs. Rastreamos cada URL indexada y la mapeamos a la nueva estructura de rutas. Nuxt y Next.js utilizan enrutamiento basado en archivos, por lo que la mayoría de las rutas se transfieren 1:1.
2. Mapa de redirecciones 301. Cualquier URL que cambie recibe una redirección permanente en next.config.js o en middleware. Verificamos cada redirección antes del lanzamiento.
3. Paridad de metadatos. Cada llamada a useHead() o useSeoMeta() en Nuxt se traduce a la función generateMetadata de Next.js. Auditamos títulos, descripciones, etiquetas Open Graph y datos estructurados.
4. Etiquetas canónicas y sitemaps. Generamos sitemaps XML con next-sitemap y verificamos que las URLs canónicas sean correctas en todas las páginas.
5. Mejora de Core Web Vitals. La migración en sí suele mejorar las puntuaciones de CWV — los Server Components reducen la carga de JavaScript, lo que mejora LCP e INP. Es un beneficio SEO adicional que se obtiene de forma gratuita.
6. Monitoreo post-lanzamiento. Hacemos seguimiento en Google Search Console durante 90 días tras la migración, vigilando errores de rastreo, caídas en la indexación o fluctuaciones en el posicionamiento.

Plazos y precios

Los plazos de migración dependen de la complejidad de tu aplicación:

• Aplicaciones pequeñas (10-30 páginas, estado mínimo): 3-5 semanas, desde $8,000
• Aplicaciones medianas (30-100 páginas, integraciones de API, autenticación): 6-10 semanas, desde $18,000
• Aplicaciones grandes (más de 100 páginas, estado complejo, módulos personalizados): 12-20 semanas, desde $35,000

Todo proyecto comienza con una auditoría de migración gratuita — inventariamos tu aplicación Nuxt, identificamos las áreas de riesgo y te entregamos una estimación detallada del alcance. Traducimos componente por componente, verificando la paridad en cada paso. Sin reescrituras masivas de una sola vez. Progreso incremental y verificable.

Por qué Social Animal para esta migración

Somos una agencia Next.js que realmente conoce Vue. Nuestro equipo ha lanzado aplicaciones Nuxt en producción y comprende las convenciones del framework. Eso significa que no nos limitamos a transliterar tu código — lo traducimos a React idiomático que utiliza los patrones de Next.js tal como están concebidos.

Server Components donde corresponde la obtención de datos. Client Components solo donde la interactividad lo exige. Límites loading.tsx y error.tsx correctamente definidos. Streaming con Suspense. El App Router de Next.js implementado correctamente — no una aplicación Vue encajada a la fuerza en sintaxis React.