Tu Prototipo de Lovable Acaba de Chocar con el Muro del SEO

Por qué migrar de Lovable a Next.js 15

Lovable es excelente en lo que hace: prototipado con IA que genera código React limpio y rápido. Pero tiene un techo. Cuando tu app necesita SEO real, renderizado en servidor, caché granular o cualquier cosa más allá de una arquitectura single-page, terminas peleando contra la herramienta en lugar de construir con ella.

Next.js 15 con el App Router es el siguiente paso natural. Obtienes React Server Components, Partial Prerendering, despliegue edge-first en Vercel y un modelo de enrutamiento que escala desde una landing page hasta una plataforma SaaS completa. El código React exportado desde Lovable se mapea limpiamente a los client components de Next.js, así que no estás reescribiendo — estás actualizando.

Hemos realizado esta migración repetidamente. El patrón es predecible, los riesgos son manejables y las mejoras de rendimiento se reflejan en números reales.

Problemas comunes de Lovable en producción

El renderizado client-side destruye el SEO

Las exportaciones de Lovable son SPAs. Google puede indexar contenido renderizado con JavaScript, claro — pero es más lento, menos fiable y compites contra páginas renderizadas en servidor que cargan en menos de un segundo. Si el tráfico orgánico importa para tu negocio, el renderizado client-side es un pasivo.

Sin lógica server-side

¿Necesitas ocultar claves de API? ¿Procesar webhooks? ¿Ejecutar middleware para autenticación? Lovable no te da un servidor. Terminas añadiendo funciones serverless, edge workers o servicios de terceros que agregan complejidad y costes que no tenías presupuestados.

Techo de rendimiento

Las apps de Lovable envían el bundle entero de React al cliente. Cada componente, cada librería, cada utilidad — todo viaja por la red. Las puntuaciones de Lighthouse en móvil suelen estar entre 45 y 65. Los usuarios con conexiones lentas lo notan.

Ansiedad por el vendor lock-in

Los componentes de UI y patrones específicos de Lovable crean dependencias sutiles. Cuanto más tiempo construyes en la plataforma, más entrelazado queda tu código con @lovable/ui y las convenciones propias de la plataforma.

Opciones de despliegue limitadas

Estás restringido al hosting de Lovable o a la exportación estática básica. Sin edge functions, sin ISR, sin pipeline de optimización de imágenes, sin preview deployments para tu equipo.

Qué te ofrece el App Router de Next.js 15

React Server Components por defecto

Los componentes se renderizan en el servidor a menos que actives explícitamente el modo client-side con 'use client'. Bundles más pequeños, cargas iniciales más rápidas y puedes hacer fetch de datos directamente en los componentes sin rutas de API ni cadenas de useEffect que lo ensucien todo.

Partial Prerendering (PPR)

Next.js 15 introduce PPR incremental: shells estáticos con huecos dinámicos. Tus páginas de marketing cargan al instante como HTML estático mientras las secciones del dashboard autenticado se transmiten dinámicamente. Lo mejor de ambos mundos, sin compromisos de configuración.

Metadata API para SEO

La función generateMetadata te da control SEO dinámico por página. Imágenes Open Graph, URLs canónicas, datos estructurados — todo con tipado seguro y co-ubicado con los componentes de tu página.

Edge-first en Vercel

Despliega en Vercel y tu app corre en el edge automáticamente. TTFB por debajo de 300 ms a nivel global. Preview deployments para cada PR. Analytics y speed insights integrados.

Integración con Supabase

Los server components de Next.js 15 funcionan de forma nativa con @supabase/ssr. Autenticación, consultas a base de datos y Row Level Security se ejecutan server-side. Sin credenciales expuestas, sin malabares de autenticación client-side.

Nuestro proceso de migración

Fase 1: Auditoría y exportación (Días 1-2)

Exportamos tu proyecto de Lovable y realizamos una auditoría completa. Cada componente, cada ruta, cada consulta a Supabase queda catalogada. Identificamos las dependencias específicas de Lovable (@lovable/ui, hooks personalizados, utilidades de la plataforma) y las mapeamos a sus equivalentes en Next.js — típicamente shadcn/ui y primitivas de Tailwind CSS.

También rastreamos tu sitio actual para capturar cada URL, meta tag y enlace interno antes de tocar nada. La preservación del SEO empieza aquí, no al final.

Fase 2: Scaffold de Next.js 15 (Días 2-3)

Inicializamos un proyecto Next.js 15 desde cero con TypeScript, Tailwind CSS y el App Router:

npx create-next-app@15 project-name --typescript --tailwind --eslint --app

El layout raíz, los estilos globales, la optimización de fuentes y la configuración del servidor de Supabase van primero. La estructura del proyecto queda así:

app/
├── (marketing)/
│   ├── page.tsx
│   └── layout.tsx
├── (auth)/
│   ├── login/page.tsx
│   └── signup/page.tsx
├── (dashboard)/
│   ├── layout.tsx
│   └── page.tsx
├── api/
│   └── webhooks/route.ts
├── layout.tsx
└── globals.css

Fase 3: Migración de componentes (Días 3-7)

Los componentes React exportados de Lovable se migran de forma incremental. Los componentes compatibles con el servidor — visualización de datos, layouts, contenido estático — se convierten en React Server Components. Los componentes interactivos como formularios, modales y animaciones reciben la directiva 'use client'.

Transformaciones clave:

• next/router → next/navigation (useRouter, usePathname, useSearchParams)
• Patrones getServerSideProps → fetches directos async en server components
• Componentes de UI de Lovable → equivalentes de shadcn/ui con Tailwind
• Llamadas client-side a Supabase → createServerClient server-side con autenticación basada en cookies

Fase 4: Migración de base de datos Supabase (Días 5-7)

Si te quedas en el mismo proyecto de Supabase, no hay ninguna migración de base de datos — solo cambiamos la librería cliente. Si necesitas una instancia nueva de Supabase (región diferente, separación de organización), exportamos el esquema, las políticas RLS y los datos semilla, y los importamos al nuevo proyecto.

Los Server Components obtienen acceso directo a Supabase:

import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const supabase = createServerClient(cookies());
  const { data } = await supabase.from('projects').select('*');
  return <ProjectList projects={data} />;
}

Sin spinners de carga. Sin useEffect. Los datos están presentes cuando la página se renderiza.

Fase 5: Preservación del SEO y redirecciones 301 (Días 7-8)

Esto no es negociable. Cada URL indexada de tu sitio en Lovable recibe una redirección 301 hacia su equivalente en Next.js. Las configuramos en next.config.js:

const nextConfig = {
  async redirects() {
    return [
      { source: '/old-path', destination: '/new-path', permanent: true },
      { source: '/legacy/:slug*', destination: '/app/:slug*', permanent: true },
    ];
  },
};

Implementamos la Metadata API en cada página, transferimos los datos estructurados, enviamos el sitemap actualizado a Google Search Console y monitorizamos la indexación durante 30 días tras el lanzamiento.

Las redirecciones 301 transfieren entre el 90 y el 99 % de la equidad de enlaces según las propias directrices de Google. Combinadas con canonical tags correctas y el envío del sitemap, tus posiciones se mantienen.

Fase 6: Despliegue en Vercel y QA (Días 8-10)

Desplegamos en Vercel con configuración de producción:

• Variables de entorno para las credenciales de Supabase
• Edge middleware para autenticación y geo-routing
• Optimización de imágenes con next/image y remote patterns
• PPR habilitado para rutas híbridas estáticas/dinámicas
• Preview deployments conectados a tu flujo de trabajo en Git

El QA completo cubre auditorías de Lighthouse, pruebas cross-browser, flujos de autenticación, operaciones de base de datos, verificación de redirecciones y rendimiento en móvil.

Estrategia de preservación del SEO

Nuestra preservación del SEO va más allá de las redirecciones:

1. Rastreo pre-migración que captura cada URL, título, descripción, estructura de encabezados y enlace interno
2. Documento de mapeo de URLs que empareja las rutas antiguas con las nuevas mediante redirecciones 301
3. Paridad de metadatos que garantiza que cada página tenga meta tags equivalentes o mejoradas mediante generateMetadata
4. Generación de sitemap usando el soporte nativo de Next.js
5. Monitorización en Search Console durante 30 días tras el lanzamiento — vigilamos errores de rastreo, caídas de indexación y cambios en posiciones
6. Migración de datos estructurados — los esquemas JSON-LD se transfieren a la nueva arquitectura

Plazos y precios

Una migración típica de Lovable a Next.js tarda 8-12 días hábiles según la complejidad de la app:

• Apps pequeñas (5-15 páginas, Supabase básico): 8 días, desde $4.500
• Apps medianas (15-40 páginas, auth + dashboard): 10 días, desde $7.500
• Apps grandes (40+ páginas, modelos de datos complejos, funcionalidades en tiempo real): 12-15 días, desde $12.000

Cada proyecto incluye 30 días de monitorización post-lanzamiento y corrección de errores. Definimos el alcance con precisión antes de empezar — sin sorpresas, sin scope creep.

La conclusión

Lovable te llevó de cero a prototipo rápidamente. Next.js 15 te lleva de prototipo a producción. El código React exportado es una ventaja, no una limitación. Los Server Components reducen el tamaño de tu bundle en un 20 % o más, la red edge de Vercel baja tu TTFB por debajo de 300 ms a nivel global, y el SSR correcto significa que Google indexa tu contenido de forma fiable.

Tus datos de Supabase permanecen exactamente donde están. Tus URLs conservan sus posiciones. Tus usuarios disfrutan de una experiencia más rápida. Así es como se hace bien una migración.