Migrar de Webflow a Next.js: cuándo y cómo

Migrar de Webflow a Next.js tiene sentido cuando tu web ha superado lo que un constructor visual hace bien: contenido complejo, varios idiomas, integraciones a medida u objetivos de rendimiento estrictos. No basta con que Next.js esté de moda. En esta guía verás las señales de que ha llegado el momento, los casos en que Webflow sigue siendo la mejor opción y un plan de migración que protege tus posiciones.

Webflow es un buen producto. Para muchas webs corporativas es el camino más rápido del diseño al lanzamiento, y un equipo sin desarrolladores puede gestionarlo. La pregunta no es qué herramienta es mejor en general. Es cuál te sale más barata, en dinero y en fricción, para la web que tendrás dentro de dos años.

Cuándo conviene migrar de Webflow a Next.js

En nuestros proyectos, los equipos empiezan a plantearse el cambio por un puñado de motivos que se repiten. Uno solo rara vez basta. Dos o tres juntos suelen ser suficientes.

• El contenido supera el modelo del CMS. Colecciones muy relacionadas, bloques reutilizados en muchas páginas o miles de elementos chocan con los límites del plan y con la estructura de colecciones.
• Necesitas varios idiomas. Webflow tiene un producto de localización, pero el precio crece con cada idioma, y un SEO multilingüe complejo puede ser difícil de controlar.
• Las integraciones se vuelven a medida. Contenido restringido, precios que vienen de tu aplicación, datos de producto desde una API o lógica en el servidor.
• El rendimiento es un requisito, no un deseo. Quieres controlar cada script, fuente e imagen, y fijar tú el presupuesto de rendimiento.
• Los desarrolladores ya llevan el producto. Si tu aplicación está hecha con React, una web de marketing con el mismo stack puede compartir componentes, autenticación y tokens de diseño.
• La dependencia de la plataforma es un riesgo. La exportación de código no incluye un CMS funcional, así que tu modelo de contenido vive dentro de la plataforma.

¿Cuándo es mejor quedarse en Webflow?

Hay buenas razones para no migrar, y las decimos en las llamadas. Quédate en Webflow si se cumple casi todo esto:

• La web tiene menos de unas 20 plantillas y cambia sobre todo en textos e imágenes.
• Tu equipo de marketing crea páginas nuevas de forma visual y le gusta hacerlo.
• No hay presupuesto para un desarrollador tras el lanzamiento, ni siquiera pequeño.
• Ninguno de los motivos anteriores te está costando dinero hoy.

Un desarrollo a medida traslada trabajo de la plataforma a tu código. Eso te da control, pero alguien tiene que mantener dependencias, hosting e integración con el CMS. Si nadie va a encargarse, la migración cambia un problema por otro. Incluye ese tiempo de mantenimiento en el presupuesto antes de decidir.

Qué cambia para tu equipo de marketing

El miedo más habitual es «necesitaremos un desarrollador para cada cambio». En realidad, eso depende del CMS, no de Next.js. Con un CMS headless, el equipo crea páginas a partir de bloques aprobados, previsualiza borradores y publica sin desplegar.

Cómo elegir el CMS

Elige el CMS según quién edita y con qué frecuencia, no por la lista de funciones. Conviene comprobar:

• Vista previa visual de los borradores con el diseño real de la página.
• Construcción de páginas por bloques, para que marketing pueda montar landing pages.
• Modelo de localización: traducción por campo o por documento.
• Roles y aprobaciones si publican varias personas.
• Precio por usuario y por idioma, porque ambos crecen con el tiempo.

Entre las opciones headless más populares están Sanity, Contentful, Storyblok y Payload. Cada una encaja con un tipo de equipo distinto. Decidimos después de ver tu modelo de contenido, no antes.

El plan de migración, paso a paso

Una migración es un rediseño con reglas más estrictas sobre URL y datos. Nuestro checklist de rediseño web cubre los pasos generales. Estos son los específicos de Webflow.

1. Exporta todo. Rastrea la web en vivo para obtener URL y metadatos, y exporta cada colección del CMS a CSV. Descarga los recursos, porque las URL de imágenes en el CDN de Webflow dejarán de ser tuyas.
2. Modela el contenido. Relaciona cada colección y campo de Webflow con el esquema del nuevo CMS. Corrige la estructura donde era un apaño.
3. Importa con un script. Pasa los elementos y el texto enriquecido con un script, no copiando y pegando. El rich text necesita limpieza: embeds, bloques de código propio y estilos en línea.
4. Reconstruye las plantillas como componentes. Cada plantilla de Webflow pasa a ser un diseño de página, y las secciones repetidas, bloques reutilizables.
5. Recrea las interacciones a propósito. Conserva las animaciones que ayudan a entender y quita las que solo añaden peso.
6. Configura redirecciones para cada URL que cambie. Las URL de colecciones en Webflow suelen seguir el patrón /collection/item, que quizá quieras cambiar.
7. Mantén las dos webs en paralelo en staging hasta que contenido, enlaces y formularios coincidan.

Redirecciones en Next.js

En una web de marketing, las redirecciones pueden vivir en la configuración de Next.js. Un patrón típico para una ruta de blog que cambia:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async redirects() {
    return [
      { source: "/post/:slug", destination: "/blog/:slug", permanent: true },
      { source: "/about-us", destination: "/about", permanent: true },
    ];
  },
};

export default nextConfig;

Si tienes cientos de redirecciones sueltas, genera esta lista a partir de tu mapa de URL en lugar de escribirla a mano.

Cómo proteger el SEO y la analítica

El tráfico orgánico suele sobrevivir a un cambio de plataforma si las URL, el contenido y los metadatos se tratan con cuidado. Lo que provoca caídas son las redirecciones que faltan, el contenido eliminado y los enlaces internos rotos.

• Mantén títulos, descripciones y encabezados en las páginas que posicionan, salvo que haya un motivo para cambiarlos.
• Genera el sitemap XML y las etiquetas canonical desde el CMS, y revísalos en staging.
• Recrea los datos estructurados que añadía Webflow y los que añadías a mano.
• Traslada la analítica, el consentimiento y los eventos de conversión antes del lanzamiento, y prueba cada evento.
• Revisa Search Console a diario durante dos semanas tras el lanzamiento y después cada semana.

Coste y plazos

Migrar de Webflow a Next.js se parece más a reconstruir que a copiar. En un proyecto típico, el diseño se reutiliza o se actualiza, el desarrollo y la importación de contenido son trabajo nuevo y la migración SEO es una tarea propia.

• Una web de marketing con blog suele encajar en nuestro paquete de rediseño web: desde 9500 $ por 8 plantillas de página, 5-6 semanas, migración SEO incluida.
• Cada plantilla extra tiene un precio fijo y publicado, y cada idioma adicional suma un 12% del coste base y de las plantillas extra.
• La configuración del CMS cuesta 2000 $. La migración SEO va incluida en el rediseño y cuesta 1500 $ como extra en otros paquetes.

Un ejemplo: una web de 10 plantillas migrada a Next.js con un CMS headless, en un idioma, sale por 12.300 $.

Los costes recurrentes también cambian. Dejas de pagar planes y usuarios de Webflow y empiezas a pagar hosting, un plan de CMS y algo de tiempo de mantenimiento. Para muchos equipos, los totales se parecen. Lo que cambia es lo que controlas.

Planifica tu paso a Next.js

Si se cumplen dos o más de los motivos anteriores, vale la pena tener un plan con alcance definido. Nuestro servicio de rediseño de página web cubre la migración a Next.js de principio a fin: el modelado de contenido, el CMS, la reconstrucción y la migración SEO, con precio cerrado y demos semanales en staging.

Si todavía lo estás decidiendo, empieza por las cifras de Webflow vs una web a medida en Next.js y vuelve cuando uno de los dos caminos sea claramente más barato para ti.