He migrado alrededor de quince sitios de Webflow a Next.js durante los últimos tres años. Algunos funcionaron sin problemas. Un par fueron dolorosos. Uno fue un desastre genuino donde un cliente perdió el 40% de su tráfico orgánico durante seis semanas porque nos perdimos un lote de reglas de redirección enterradas en las páginas de colecciones CMS de Webflow. Esa experiencia me enseñó más sobre preservación de SEO durante migraciones que cualquier documentación.

Aquí está todo lo que sé sobre hacerlo correctamente -- los pasos técnicos, los gotchas de los que nadie te advierte, y el proceso exacto que usamos en Social Animal para asegurar que los rankings de búsqueda sobrevivan la transición.

Tabla de Contenidos

Por Qué Abandonar Webflow por Next.js

Déjame ser claro: Webflow es genuinamente bueno en lo que hace. Genera HTML semántico limpio, maneja etiquetas meta nativamente, genera automáticamente sitemaps XML, y administra robots.txt sin que toques un archivo de configuración. Para un sitio de marketing que no necesita mucha lógica personalizada, es excelente.

Pero estás leyendo este artículo, lo que probablemente significa que has llegado al límite. Aquí está lo que típicamente empuja a los equipos hacia Next.js:

Límites de rendimiento. Los sitios Webflow con interacciones pesadas, muchos elementos CMS o animaciones complejas comienzan a mostrar grietas en Core Web Vitals. Hemos visto sitios Webflow con tiempos de Largest Contentful Paint (LCP) por encima de 4 segundos en móvil -- bien por encima del umbral de 2.5 segundos de Google. Un sitio Next.js construido correctamente con renderizado del lado del servidor y optimización next/image típicamente reduce eso a la mitad.

Límites de personalización. ¿Necesitas integrar un CMS headless como Sanity o Contentful? ¿Quieres construir un flujo de pago personalizado? ¿Necesitas middleware para pruebas A/B en el edge? El jardín amurallado de Webflow comienza a sentirse muy pequeño.

Costo en escala. El plan CMS de Webflow corre $29/mes para un sitio único, pero las características empresariales empujan eso a $49+/mes. Cuando factorizan múltiples sitios o necesidades de localización, alojar una aplicación Next.js en el plan Pro de Vercel a $20/mes comienza a verse inteligente -- especialmente porque obtienes funciones edge, análisis e implementaciones de vista previa incluidas.

Los datos de rendimiento respaldan esto. El equipo de ingeniería de Webflow documentó una mejora del 20% en tiempos de carga cuando migraron su dashboard a Next.js con SSR. En benchmarks de 2025, los sitios Next.js 15 que usan el App Router consistentemente puntúan 15-25% más alto en Lighthouse que compilaciones Webflow equivalentes con interacciones complejas.

Si te interesa lo que es posible con un stack Next.js moderno, desglosamos nuestro enfoque en nuestra página de capacidades de desarrollo Next.js.

El Costo Real de la Migración

Hablemos de dinero antes de hablar de código. He visto demasiados equipos comenzar una migración sin entender la inversión completa.

Componente Costo Estimado Notas
Exportación de Webflow y auditoría de contenido $1,000 – $3,000 Trabajo manual; la exportación de Webflow pierde datos CMS
Desarrollo Next.js (10-20 páginas) $8,000 – $25,000 Depende de complejidad, interacciones, integraciones
Desarrollo Next.js (20-50 páginas) $20,000 – $60,000 Sitios empresariales con CMS, autenticación, lógica personalizada
Configuración de CMS Headless $2,000 – $8,000 Configuración de Sanity, Contentful o Payload CMS
Mapeo de redirecciones SEO y QA $1,500 – $4,000 El elemento más importante de esta lista
Alojamiento Vercel/Netlify (mensual) $20 – $150/mes Reemplaza alojamiento de Webflow $29-$49/mes
Monitoreo post-migración $500 – $2,000 4-8 semanas de monitoreo de Search Console

Para un sitio de marketing de tamaño medio típico con 30 páginas y un blog, estás viendo $15,000–$40,000 todo incluido. Eso no es barato. Pero si tu sitio Webflow genera tráfico orgánico significativo, el costo de una migración fracasada es mucho mayor.

Publicamos precios transparentes para proyectos como este en /pricing -- vale la pena verificar si quieres un rango realista para tu situación específica.

Auditoría SEO Previa a la Migración

Aquí es donde la mayoría de las personas se salta pasos, y es donde la mayoría de las migraciones fallan. Antes de escribir una sola línea de código Next.js, necesitas una imagen completa de tu huella SEO actual.

Rastrear Todo

Ejecuta Screaming Frog (o Sitebulb, o Ahrefs Site Audit) contra tu sitio Webflow en vivo. Exporta cada URL. Me refiero a cada URL -- páginas, elementos de colecciones CMS, páginas de archivo paginadas, páginas de utilidad, todo.

Necesitas:

  • Inventario completo de URLs -- cada página que devuelve un estado 200
  • Títulos y descripciones meta para cada página
  • URLs canónicas -- Webflow a veces establece estas de forma extraña en páginas de colecciones
  • Estructura de enlaces internos -- qué páginas enlazan con cuáles
  • Datos estructurados -- cualquier marcado de esquema que Webflow esté generando
  • Baseline de Core Web Vitals -- ejecuta PageSpeed Insights en tus 20 páginas principales

Documentar Tus Mejores Páginas

Abre Google Search Console. Ve a Rendimiento. Ordena por clics en los últimos 12 meses. Exporta estos datos. Estas son las páginas que absolutamente no puedes permitirte romper.

Típicamente creo una hoja de cálculo con columnas como esta:

URL | Clics Mensuales | Consultas Principales | Posición Media | Prioridad
/blog/seo-guide | 2,400 | "seo guide 2025" | 3.2 | CRÍTICA
/pricing | 890 | "agency pricing" | 5.1 | ALTA
/about | 340 | "social animal dev" | 1.0 | MEDIA

Cada página en las categorías CRÍTICA y ALTA recibe atención manual durante la migración. Sin redirecciones automáticas en masa. Sin suposiciones.

Guardar Tu Perfil de Enlaces Entrantes

Ejecuta un informe de enlaces entrantes de Ahrefs o SEMrush. Si sitios externos están enlazando a URLs específicas de Webflow (especialmente publicaciones de blog o páginas de recursos), esas URLs deben resolver correctamente después de la migración -- ya sea en la misma ruta o a través de una redirección 301.

Exportar Tu Sitio Webflow

La función de exportación de Webflow es... limitada. Aquí está lo que realmente obtienes y lo que no.

Lo Que la Exportación Incluye

En un plan CMS o Business, haciendo clic en Export Code en Project Settings obtienes un ZIP que contiene:

  • Archivos HTML estáticos para cada página
  • CSS (incluyendo las clases de utilidad de Webflow)
  • JavaScript (el runtime de Webflow + tu código personalizado)
  • Imágenes y otros activos subidos

Lo Que la Exportación No Incluye

Esta es la parte crítica: los datos CMS de Webflow no vienen con la exportación. Tus publicaciones de blog, miembros del equipo, casos de estudio -- cualquier contenido almacenado en CMS Collections -- no aparecerá como archivos HTML individuales de forma útil. Se hornearán en el HTML exportado como contenido estático, pero pierdes los datos estructurados.

Para obtener tu contenido CMS correctamente:

  1. Usa la API CMS de Webflow para extraer elementos de colecciones como JSON
  2. Exporta colecciones como CSV desde el Diseñador de Webflow (Configuración de Colecciones → Exportar)
  3. Usa una herramienta como Whalesync o Make.com para enviar datos CMS a tu nuevo CMS headless

Aquí hay un script rápido para extraer elementos CMS de Webflow a través de su API:

// fetch-webflow-cms.js
const WEBFLOW_API_TOKEN = process.env.WEBFLOW_TOKEN;
const COLLECTION_ID = 'your-collection-id';

async function fetchCollectionItems() {
  const response = await fetch(
    `https://api.webflow.com/v2/collections/${COLLECTION_ID}/items`,
    {
      headers: {
        'Authorization': `Bearer ${WEBFLOW_API_TOKEN}`,
        'accept': 'application/json'
      }
    }
  );
  const data = await response.json();
  
  // Write to JSON file for import into your headless CMS
  const fs = require('fs');
  fs.writeFileSync(
    'cms-export.json',
    JSON.stringify(data.items, null, 2)
  );
  console.log(`Exported ${data.items.length} items`);
}

fetchCollectionItems();

No confíes únicamente en la exportación HTML. Analiza los archivos exportados con algo como Cheerio si necesitas extraer contenido del HTML estático, pero la ruta de API es más limpia.

Construir el Reemplazo Next.js

Ahora la compilación real. Estoy asumiendo que estás usando Next.js 14 o 15 con el App Router -- si estás comenzando de nuevo en 2025, no hay razón para usar el Pages Router.

Mapeo de Estructura de URL

Esto es innegociable: tu nueva estructura de URL debe coincidir con la anterior siempre que sea posible. Cada cambio de URL es un riesgo. Si tu blog Webflow vive en /blog/post-slug, tu blog Next.js debe vivir en /blog/post-slug.

app/
├── page.tsx                    # Homepage
├── about/
│   └── page.tsx               # /about
├── blog/
│   ├── page.tsx               # /blog (listing)
│   └── [slug]/
│       └── page.tsx           # /blog/post-slug
├── services/
│   └── [slug]/
│       └── page.tsx           # /services/web-development
└── contact/
    └── page.tsx               # /contact

Implementación de Metadatos

La API de metadatos de Next.js 15 es genuinamente mejor que lo que Webflow te ofrece. Obtienes control programático completo, y todo se renderiza del lado del servidor -- lo que significa que Googlebot lo ve en la primera pintura.

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
import { getPostBySlug } from '@/lib/cms';
import { notFound } from 'next/navigation';

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  
  if (!post) return {};
  
  return {
    title: post.seoTitle || post.title,
    description: post.seoDescription || post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.featuredImage, width: 1200, height: 630 }],
      type: 'article',
      publishedTime: post.publishedAt,
    },
    alternates: {
      canonical: `https://yoursite.com/blog/${slug}`,
    },
  };
}

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  
  if (!post) notFound();

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: post.author.name,
    },
    image: post.featuredImage,
    description: post.excerpt,
  };

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{post.title}</h1>
      {/* Render post content */}
    </article>
  );
}

Observa que la URL canónica se establece explícitamente. No dejes esto al azar. Webflow maneja canonicales automáticamente; en Next.js, necesitas ser intencional.

Optimización de Rendimiento

Dos cosas que hacen la mayor diferencia versus Webflow:

Optimización de imágenes con next/image:

import Image from 'next/image';

<Image
  src={post.featuredImage}
  alt={post.imageAlt}
  width={1200}
  height={630}
  priority={true} // for above-the-fold images
  sizes="(max-width: 768px) 100vw, 800px"
/>

Optimización de fuentes con next/font:

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

Estas dos optimizaciones por sí solas típicamente ahorran 1-2 segundos de LCP en comparación con el manejo predeterminado de fuentes e imágenes de Webflow.

Para equipos que consideran el lado de CMS headless de las cosas, cubrimos ese trabajo de integración en nuestra página de desarrollo de CMS headless.

La Estrategia de Redirección 301 Que Realmente Funciona

Esta es la sección que salva tus rankings. Voy a ser dolorosamente exhaustivo aquí porque he visto demasiadas migraciones fallar en la implementación de redirecciones.

Construir un Mapa de Redirección Completo

Toma tu rastreo de Screaming Frog de la fase de auditoría. Para cada URL que existe en el sitio Webflow, necesitas exactamente uno de estos resultados:

  1. Misma URL en Next.js -- no se necesita redirección, pero verifica que funcione
  2. URL diferente en Next.js -- redirección 301 de vieja a nueva
  3. Página removida -- redirección 301 a la página existente más relevante

Nunca devuelvas un 404 para una página que previamente tenía tráfico o enlaces entrantes. Nunca.

Implementar en next.config.js

// next.config.js
const redirects = require('./redirects.json');

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return redirects.map(({ source, destination }) => ({
      source,
      destination,
      permanent: true, // 301 status code
    }));
  },
};

module.exports = nextConfig;

Y tu redirects.json:

[
  { "source": "/old-blog-post", "destination": "/blog/old-blog-post" },
  { "source": "/services/old-service", "destination": "/services/new-service" },
  { "source": "/team/:member", "destination": "/about" }
]

Usa patrones de coincidencia de ruta para redirecciones en masa donde las estructuras de URL cambiaron sistemáticamente. Pero siempre prueba estas individualmente -- la coincidencia de patrones puede causar bucles de redirección si no tienes cuidado.

El Gotcha Específico de Webflow

Webflow añade barras diagonales finales a las URLs. Next.js por defecto no. Esto significa que yoursite.com/about/ (Webflow) y yoursite.com/about (Next.js) son técnicamente URLs diferentes.

En tu next.config.js, añade:

const nextConfig = {
  trailingSlash: false, // or true -- just be consistent
  // ...
};

Luego añade redirecciones explícitas para variantes de barra diagonal final de tus páginas de mayor tráfico. Google lo descubrirá eventualmente a través de canonicales, pero los 301 explícitos aceleran el proceso significativamente.

Manejo del Contenido CMS de Webflow

Si tenías un blog CMS de Webflow con 200 publicaciones, necesitas en algún lugar para que viva ese contenido. Tienes algunas opciones sólidas en 2025:

CMS Precios (2025) Mejor Para Esfuerzo de Migración
Sanity Tier gratuito → $99/mes (Growth) Modelos de contenido complejos, colaboración en tiempo real Medio
Contentful Tier gratuito → $300/mes (Team) Equipos empresariales, multi-idioma Medio-Alto
Payload CMS Auto-alojado (gratis) o Cloud $30/mes+ Control total, TypeScript-nativo Mayor inicial, menor en curso
Archivos MDX en repo Gratis Blogs pequeños (<100 publicaciones) Bajo

Para la mayoría de las migraciones de Webflow a Next.js, recomiendo Sanity. Su flexibilidad de esquema se mapea bien a la estructura de colecciones de Webflow, y hay herramientas comunitarias para importar datos de Webflow. Payload CMS es cada vez más popular para equipos que quieren todo en TypeScript -- vale la pena evaluar si estás construyendo un stack personalizado.

Lo clave: sea cual sea el CMS que elijas, asegúrate de que los slugs de publicación de blog coincidan exactamente. /blog/my-great-post en Webflow necesita ser /blog/my-great-post en Next.js, extrayendo de tu nuevo CMS.

Monitoreo SEO Post-Migración

El día del lanzamiento no es el final. Es el comienzo de un período de monitoreo de 4-8 semanas.

Semana 1: Acciones Inmediatas

  1. Envía tu nuevo sitemap a Google Search Console (https://yoursite.com/sitemap.xml)
  2. Solicita indexación para tus 20 páginas principales usando URL Inspection
  3. Monitorea el informe de Cobertura -- observa picos en errores 404
  4. Verifica cadenas de redirección -- usa Screaming Frog para rastrear el sitio en vivo y verifica que cada redirección se resuelva en un salto

Semanas 2-4: Recuperación de Rankings

Espera una caída temporal. He visto rankings caer 5-15 posiciones en las primeras dos semanas incluso con redirecciones perfectas. No entres en pánico. Google necesita rastrear nuevamente, reprocesar y reasignar señales de ranking.

Lo que debes observar:

  • Recuento de páginas indexadas en Search Console -- debería estabilizarse dentro de 2 semanas
  • Tasas de clics -- si la tasa de clics cae significativamente, tus descripciones meta podrían necesitar ajuste
  • Core Web Vitals -- tu sitio Next.js debería puntuar mejor; verifica en el informe de CWV de Search Console

Semanas 4-8: Confirmación

Para la semana 4, tus rankings deberían estar recuperándose. Para la semana 8, deberían coincidir o superar tu baseline anterior a la migración. Si no se han recuperado para la semana 6, algo está mal -- verifica redirecciones faltantes, problemas canónicos o problemas de renderización.

Errores Comunes Que Destruyen Rankings

Olvidar las páginas generadas automáticamente de Webflow. Webflow crea páginas que podrías no considerar -- /blog (el listado de colecciones), páginas paginadas como /blog?page=2, páginas de filtro de etiquetas/categorías. Mapea todas ellas.

No coincidir la jerarquía de encabezados. Si tu sitio Webflow tenía etiquetas <h1> en publicaciones de blog que Google estaba usando para fragmentos destacados, tu sitio Next.js necesita la misma jerarquía. No envuelvas accidentalmente tu título en un <h2> porque tu componente de diseño ya tiene un <h1> en algún lugar.

Renderización del lado del cliente para contenido crítico. Este es el grande. Si tus páginas Next.js cargan un shell vacío y luego obtienen contenido del lado del cliente, Googlebot podría no ver tu contenido de forma confiable. Usa componentes de servidor (el predeterminado en App Router) o generateStaticParams para generación estática. SSR es por qué te moviste a Next.js -- úsalo.

Ignorar Open Graph y vistas previas sociales. Webflow genera automáticamente etiquetas OG. Si tus publicaciones de blog compartidas de repente muestran vistas previas rotas en LinkedIn y Twitter, perderás tráfico social que indirectamente afecta el SEO.

Cambiar dominios durante la migración. Si puedes evitarlo, no cambies tu dominio al mismo tiempo que tu plataforma. Cada cambio es un factor de riesgo independiente. Migra plataformas primero, estabiliza rankings, luego considera un cambio de dominio como un proyecto separado.

Si esto se siente abrumador, es normal. Los proyectos de migración son donde la experiencia importa más. Hemos hecho suficientemente con esto para tener un proceso confiable -- comunícate a través de nuestra página de contacto si quieres hablar de tu situación específica.

Preguntas Frecuentes

¿Cuánto tiempo tarda una migración de Webflow a Next.js? Para un sitio de marketing típico con 20-40 páginas y un blog, espera 6-12 semanas desde la auditoría hasta el lanzamiento. El trabajo de desarrollo en sí podría tomar 4-8 semanas, pero necesitas tiempo para la auditoría SEO por adelantado y el monitoreo después. Apresurarse en una migración es cómo pierdes rankings.

¿Perderé mis rankings de SEO cuando migre de Webflow? No si lo haces correctamente. Con redirecciones 301 apropiadas, estructuras de URL coincidentes, y elementos SEO en página equivalentes, deberías ver rankings recuperándose dentro de 4-8 semanas. Algunos sitios en realidad ven mejoras porque Next.js ofrece mejores puntuaciones de Core Web Vitals. La clave es nunca dejar que una URL previamente indexada devuelva un 404.

¿Puedo exportar el código de mi sitio Webflow y usarlo en Next.js? Técnicamente sí -- Webflow exporta HTML limpio, CSS y JavaScript. Pero prácticamente, no querrías. El código exportado de Webflow usa sus propias convenciones de nombres de clases y scripts de runtime que no se mapean limpiamente a componentes React. Es mejor reconstruir tu UI en React/Next.js usando la exportación de Webflow como referencia visual, luego migrar el contenido por separado.

¿Qué CMS headless debería usar para reemplazar el CMS de Webflow? Sanity y Payload CMS son las opciones más populares en 2025 para proyectos Next.js. Sanity ofrece un tier gratuito generoso y excelente edición en tiempo real. Payload CMS es nativo de TypeScript y puede ser auto-alojado. Para blogs más simples, incluso archivos MDX almacenados en tu repositorio Git funcionan bien. La elección correcta depende del tamaño de tu equipo y la complejidad del contenido.

¿Cómo manejo los formularios de Webflow después de la migración? El manejo de formularios de Webflow no se transfiere. En Next.js, puedes usar Server Actions (incorporadas en Next.js 14+) para procesar envíos de formularios, o integrar servicios como Formspree, Resend o tus propias rutas de API. Para formularios de contacto, Server Actions con entrega de correo electrónico vía Resend es mi opción predeterminada -- es simple y mantiene todo en tu código base.

¿Es Next.js realmente mejor para SEO que Webflow? Depende del sitio. Para un sitio de marketing de 10 páginas sin lógica personalizada, las herramientas SEO integradas de Webflow honestamente son suficientes. Pero para sitios ricos en contenido, sitios que necesitan etiquetas meta dinámicas basadas en contexto de usuario, o sitios donde el rendimiento de Core Web Vitals importa (pista: siempre importa), Next.js te ofrece más control. El renderizado del lado del servidor asegura que Googlebot siempre vea HTML completamente renderizado, y obtienes control programático sobre cada elemento de SEO.

¿Cuánto cuesta migrar de Webflow a Next.js? Un rango realista para un sitio de tamaño medio es $15,000-$40,000 para una migración profesional incluyendo preservación de SEO. Las tarifas de freelancer podrían ser más bajas ($5,000-$15,000) pero conllevan más riesgo si carecen de experiencia en migraciones. La variable de costo más grande es si necesitas integración de CMS headless y cuántas interacciones personalizadas necesitan ser reconstruidas.

¿Debería usar SSR o SSG para mi sitio Next.js migrado? Para la mayoría de sitios de marketing migrados de Webflow, Static Site Generation (SSG) es el predeterminado correcto. Es más rápido y barato de servir. Usa SSR selectivamente para páginas que necesitan datos en tiempo real -- como una página de precios que obtiene datos en vivo de una API. Next.js 15 App Router facilita mezclar ambos enfoques dentro del mismo proyecto usando componentes de servidor y generateStaticParams.