Migrei aproximadamente quinze sites de Webflow para Next.js nos últimos três anos. Alguns correram perfeitamente. Um casal foi doloroso. Um foi um verdadeiro desastre onde um cliente perdeu 40% do seu tráfego orgânico durante seis semanas porque perdemos um lote de regras de redirecionamento enterradas nas páginas de coleção CMS do Webflow. Essa experiência me ensinou mais sobre preservação de SEO durante migrações do que qualquer documentação jamais poderia.

Aqui está tudo que sei sobre fazer isso corretamente -- os passos técnicos, as armadilhas que ninguém avisa sobre, e o processo exato que usamos na Social Animal para garantir que os rankings de busca sobrevivam à transição.

Índice

Por que Deixar Webflow para Next.js

Deixa eu ser claro: Webflow é genuinamente bom no que faz. Ele gera HTML semântico limpo, lida com meta tags nativamente, gera automaticamente sitemaps XML, e gerencia robots.txt sem você tocar em um arquivo de configuração. Para um site de marketing que não precisa de muita lógica customizada, é excelente.

Mas você está lendo este artigo, o que significa que você provavelmente bateu na parede. Aqui está o que normalmente leva times em direção a Next.js:

Limites de performance. Sites Webflow com interações pesadas, muitos itens CMS, ou animações complexas começam a mostrar rachaduras nos Core Web Vitals. Vimos sites Webflow com tempos de Largest Contentful Paint (LCP) acima de 4 segundos em mobile -- bem passado do limite de 2,5 segundos do Google. Um site Next.js propriamente construído com renderização no servidor e otimização next/image normalmente corta isso pela metade.

Limites de customização. Precisa integrar um CMS headless como Sanity ou Contentful? Quer construir um fluxo de checkout customizado? Precisa de middleware para testes A/B na borda? O jardim murado do Webflow começa a parecer muito pequeno.

Custo em escala. O plano CMS do Webflow custa $29/mês para um único site, mas recursos enterprise chegam a $49+/mês. Quando você fatora vários sites ou necessidades de localização, hospedar um app Next.js no plano Pro do Vercel por $20/mês começa a parecer inteligente -- especialmente já que você ganha funções edge, análise, e deployments de preview inclusos.

Os dados de performance respaldam isso. O próprio time de engenharia do Webflow documentou uma melhoria de 20% nos tempos de carregamento quando migraram seu dashboard para Next.js com SSR. Nos benchmarks de 2025, sites Next.js 15 usando o App Router consistentemente pontuam 15-25% mais alto no Lighthouse do que builds Webflow equivalentes com interações complexas.

Se você está interessado no que é possível com um stack moderno de Next.js, detalhamos nossa abordagem na página de capacidades de desenvolvimento Next.js.

O Custo Real da Migração

Vamos falar dinheiro antes de falar código. Vi muitos times começarem uma migração sem entender o investimento total.

Componente Custo Estimado Notas
Exportação Webflow & auditoria de conteúdo $1.000 – $3.000 Trabalho manual; exportação Webflow perde dados CMS
Desenvolvimento Next.js (10-20 páginas) $8.000 – $25.000 Depende de complexidade, interações, integrações
Desenvolvimento Next.js (20-50 páginas) $20.000 – $60.000 Sites enterprise com CMS, autenticação, lógica customizada
Configuração CMS Headless $2.000 – $8.000 Configuração de Sanity, Contentful, ou Payload CMS
Mapeamento de redirecionamento SEO & QA $1.500 – $4.000 O item de linha mais importante desta lista
Hospedagem Vercel/Netlify (mensal) $20 – $150/mês Substitui hospedagem Webflow de $29-$49/mês
Monitoramento pós-migração $500 – $2.000 4-8 semanas de monitoramento do Search Console

Para um site de marketing típico de médio porte com 30 páginas e um blog, você está vendo $15.000–$40.000 tudo incluído. Não é barato. Mas se seu site Webflow está gerando tráfego orgânico significativo, o custo de uma migração mal feita é muito mais alto.

Publicamos preços transparentes para projetos assim em /pricing -- vale a pena verificar se você quer um intervalo realista para sua situação específica.

Auditoria de SEO Pré-Migração

É aqui que a maioria das pessoas pula passos, e é onde a maioria das migrações falha. Antes de você escrever uma única linha de código Next.js, você precisa de um quadro completo do seu footprint de SEO atual.

Rastreie Tudo

Execute Screaming Frog (ou Sitebulb, ou Ahrefs Site Audit) contra seu site Webflow ativo. Exporte cada URL. Eu digo cada URL -- páginas, itens de coleção CMS, páginas de arquivo paginadas, páginas utilitárias, tudo.

Você precisa:

  • Inventário completo de URLs -- cada página que retorna um status 200
  • Títulos e meta descriptions para cada página
  • URLs canônicas -- Webflow às vezes configura essas de forma estranha em páginas de coleção
  • Estrutura de links internos -- quais páginas vinculam a quais
  • Dados estruturados -- qualquer schema markup que Webflow está gerando
  • Baseline de Core Web Vitals -- execute PageSpeed Insights nas suas top 20 páginas

Documente Seus Melhores Desempenhos

Abra Google Search Console. Vá para Performance. Ordene por cliques nos últimos 12 meses. Exporte esses dados. Essas são as páginas que você absolutamente não pode se permitir quebrar.

Eu tipicamente crio uma planilha com colunas assim:

URL | Cliques Mensais | Top Queries | Posição Média | Prioridade
/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 | MÉDIA

Cada página nas categorias CRÍTICA e ALTA recebe atenção manual durante a migração. Sem redirecionamentos automáticos em massa. Sem suposições.

Execute um relatório de backlink Ahrefs ou SEMrush. Se sites externos estão vinculando a URLs específicas do Webflow (especialmente posts de blog ou páginas de recursos), essas URLs devem resolver corretamente após a migração -- seja no mesmo caminho ou via um redirecionamento 301.

Exportando Seu Site Webflow

O recurso de exportação do Webflow é... limitado. Aqui está o que você realmente consegue e o que não consegue.

O Que a Exportação Inclui

Em um plano CMS ou Business, clicando em Export Code em Project Settings oferece um ZIP contendo:

  • Arquivos HTML estáticos para cada página
  • CSS (incluindo classes utilitárias do Webflow)
  • JavaScript (runtime do Webflow + seu código customizado)
  • Imagens e outros ativos enviados

O Que a Exportação Não Inclui

Esta é a parte crítica: dados CMS do Webflow não vêm com a exportação. Seus posts de blog, membros da equipe, estudos de caso -- qualquer conteúdo armazenado em CMS Collections -- não aparecerão como arquivos HTML individuais de forma útil. Eles serão assados no HTML exportado como conteúdo estático, mas você perde os dados estruturados.

Para extrair seu conteúdo CMS propriamente:

  1. Use a API CMS do Webflow para puxar itens de coleção como JSON
  2. Exporte coleções como CSV do Webflow Designer (Collection Settings → Export)
  3. Use uma ferramenta como Whalesync ou Make.com para canalizar dados CMS para seu novo CMS headless

Aqui está um script rápido para puxar itens CMS do Webflow via sua 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();

Não dependa apenas da exportação HTML. Analise os arquivos exportados com algo como Cheerio se você precisar extrair conteúdo do HTML estático, mas a rota API é mais limpa.

Construindo o Substituto Next.js

Agora a construção real. Estou assumindo que você está usando Next.js 14 ou 15 com o App Router -- se você está começando fresco em 2025, não há razão para usar o Pages Router.

Mapeamento de Estrutura de URL

Isso é inegociável: sua nova estrutura de URL deve corresponder à sua antiga sempre que possível. Cada mudança de URL é um risco. Se seu blog Webflow vive em /blog, seu blog Next.js deve viver em /blog.

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

Implementação de Metadados

A API de metadados do Next.js 15 é genuinamente melhor do que o que Webflow oferece. Você ganha controle programático completo, e tudo renderiza no servidor -- o que significa que Googlebot vê isso na primeira 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>
  );
}

Note que a URL canônica é definida explicitamente. Não deixe isso ao acaso. Webflow lida com canônicas automaticamente; em Next.js, você precisa ser intencional.

Otimização de Performance

Duas coisas que fazem a maior diferença versus Webflow:

Otimização de imagem com next/image:

import Image from 'next/image';

<Image
  src={post.featuredImage}
  alt={post.imageAlt}
  width={1200}
  height={630}
  priority={true} // para imagens acima da dobra
  sizes="(max-width: 768px) 100vw, 800px"
/>

Otimização de fonte com next/font:

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

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

Essas duas otimizações sozinhas normalmente raspam 1-2 segundos do LCP comparado ao tratamento padrão de fonte e imagem do Webflow.

Para times considerando o lado CMS headless das coisas, cobrimos esse trabalho de integração na nossa página de desenvolvimento CMS headless.

A Estratégia de Redirecionamento 301 Que Funciona Realmente

Esta é a seção que salva seus rankings. Vou ser dolorosamente minucioso aqui porque vi muitas migrações falharem na implementação de redirecionamento.

Construa um Mapa Completo de Redirecionamento

Pegue seu rastreamento Screaming Frog da fase de auditoria. Para cada URL que existe no site Webflow, você precisa de exatamente um desses resultados:

  1. Mesma URL em Next.js -- nenhum redirecionamento necessário, mas verifique que funciona
  2. URL diferente em Next.js -- redirecionamento 301 de antigo para novo
  3. Página removida -- redirecionamento 301 para a página existente mais relevante

Nunca retorne um 404 para uma página que anteriormente tinha tráfego ou backlinks. Nunca.

Implemente em 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, // código de status 301
    }));
  },
};

module.exports = nextConfig;

E seu redirects.json:

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

Use padrões de correspondência de caminho para redirecionamentos em massa onde estruturas de URL mudaram sistematicamente. Mas sempre teste esses individualmente -- a correspondência de padrão pode causar loops de redirecionamento se você não tiver cuidado.

A Armadilha Específica do Webflow

Webflow adiciona barras finais às URLs. Next.js por padrão não adiciona. Isso significa que yoursite.com/about/ (Webflow) e yoursite.com/about (Next.js) são tecnicamente URLs diferentes.

Em seu next.config.js, adicione:

const nextConfig = {
  trailingSlash: false, // ou true -- apenas seja consistente
  // ...
};

Então adicione redirecionamentos explícitos para variantes com barra final de suas páginas com maior tráfego. Google descobrirá isso eventualmente através de canônicas, mas 301s explícitos aceleram o processo significativamente.

Lidando com Conteúdo CMS do Webflow

Se você teve um blog CMS do Webflow com 200 posts, você precisa de algum lugar para esse conteúdo viver. Você tem algumas opções sólidas em 2025:

CMS Preço (2025) Melhor Para Esforço de Migração
Sanity Tier gratuito → $99/mês (Growth) Modelos de conteúdo complexos, colaboração em tempo real Médio
Contentful Tier gratuito → $300/mês (Team) Times enterprise, multi-idioma Médio-Alto
Payload CMS Auto-hospedado (gratuito) ou Cloud $30/mês+ Controle total, TypeScript nativo Inicial mais alto, continuativo mais baixo
Arquivos MDX no repo Gratuito Blogs pequenos (<100 posts) Baixo

Para a maioria das migrações Webflow-para-Next.js, recomendo Sanity. Sua flexibilidade de schema mapeia bem para a estrutura de coleção do Webflow, e existem ferramentas comunitárias para importar dados do Webflow. Payload CMS está cada vez mais popular para times que querem tudo em TypeScript -- vale a pena avaliar se você está construindo um stack customizado.

A coisa chave: qualquer CMS que você escolha, garanta que seus slugs de posts de blog correspondam exatamente. /blog/my-great-post em Webflow precisa ser /blog/my-great-post em Next.js, puxando de seu novo CMS.

Monitoramento de SEO Pós-Migração

O dia do lançamento não é o fim. É o início de um período de monitoramento de 4-8 semanas.

Semana 1: Ações Imediatas

  1. Envie seu novo sitemap para Google Search Console (https://yoursite.com/sitemap.xml)
  2. Solicite indexação para suas top 20 páginas usando URL Inspection
  3. Monitore o relatório de Coverage -- observe picos em erros 404
  4. Verifique cadeias de redirecionamento -- use Screaming Frog para rastrear o site ativo e verifique que cada redirecionamento se resolve em um salto

Semanas 2-4: Recuperação de Rankings

Espere uma queda temporária. Vi rankings caírem 5-15 posições nas primeiras duas semanas mesmo com redirecionamentos perfeitos. Não entre em pânico. Google precisa fazer um rastreamento novamente, reprocessar, e reatribuir sinais de ranking.

O que observar:

  • Contagem de páginas indexadas no Search Console -- deve estabilizar dentro de 2 semanas
  • Taxas de clique -- se a CTR cair significativamente, suas meta descriptions podem precisar de ajuste
  • Core Web Vitals -- seu site Next.js deve estar pontuando melhor; verifique no relatório de CWV do Search Console

Semanas 4-8: Confirmação

Até a semana 4, seus rankings devem estar se recuperando. Até a semana 8, eles devem corresponder ou exceder seu baseline pré-migração. Se não tiverem se recuperado até a semana 6, algo está errado -- verifique redirecionamentos perdidos, problemas de canônica, ou problemas de renderização.

Erros Comuns Que Destroem Rankings

Esquecer das páginas auto-geradas do Webflow. Webflow cria páginas que você pode não pensar -- /blog (a listagem de coleção), páginas paginadas como /blog?page=2, páginas de filtro de tag/categoria. Mapeie todas elas.

Não corresponder à hierarquia de títulos. Se seu site Webflow tinha tags <h1> em posts de blog que Google estava usando para featured snippets, seu site Next.js precisa da mesma hierarquia. Não envolva acidentalmente seu título em uma tag <h2> porque seu componente de layout já tem um <h1> em algum lugar.

Renderização do lado do cliente para conteúdo crítico. Este é o grande. Se suas páginas Next.js carregam um shell vazio e então buscam conteúdo do lado do cliente, Googlebot pode não ver seu conteúdo de forma confiável. Use componentes servidores (o padrão em App Router) ou generateStaticParams para geração estática. SSR é por que você se moveu para Next.js -- use-o.

Ignorar Open Graph e visualizações de redes sociais. Webflow auto-gera tags OG. Se seus posts de blog compartilhados de repente mostram visualizações quebradas no LinkedIn e Twitter, você perderá tráfego social que afeta indiretamente o SEO.

Mudar domínios durante a migração. Se você puder evitar, não mude seu domínio ao mesmo tempo que sua plataforma. Cada mudança é um fator de risco independente. Migre plataformas primeiro, estabilize rankings, então considere uma mudança de domínio como um projeto separado.

Se isso está parecendo assustador, é normal. Projetos de migração são onde a experiência mais importa. Fizemos o suficiente desses para ter um processo confiável -- entre em contato através da nossa página de contato se você quer conversar sobre sua situação específica.

FAQ

Quanto tempo uma migração Webflow para Next.js leva?

Para um site de marketing típico com 20-40 páginas e um blog, espere 6-12 semanas de auditoria ao lançamento. O trabalho de desenvolvimento em si pode levar 4-8 semanas, mas você precisa de tempo para a auditoria de SEO antecipadamente e monitoramento depois. Apressar uma migração é como você perde rankings.

Vou perder meus rankings de SEO ao migrar de Webflow?

Não se você fizer isso corretamente. Com redirecionamentos 301 adequados, estruturas de URL correspondentes, e elementos de SEO on-page equivalentes, você deve ver rankings se recuperarem dentro de 4-8 semanas. Alguns sites realmente veem melhorias porque Next.js oferece scores melhores de Core Web Vitals. A chave é nunca deixar uma URL previamente indexada retornar um 404.

Posso exportar meu código de site Webflow e usá-lo em Next.js?

Tecnicamente sim -- Webflow exporta HTML, CSS e JavaScript limpos. Mas praticamente, você não quereria. O código exportado do Webflow usa suas próprias convenções de nomeação de classe e scripts de runtime que não mapeiam de forma limpa para componentes React. É melhor reconstruir sua UI em React/Next.js usando a exportação Webflow como referência visual, então migrar o conteúdo separadamente.

Qual CMS headless devo usar para substituir o CMS do Webflow?

Sanity e Payload CMS são as escolhas mais populares em 2025 para projetos Next.js. Sanity oferece um tier gratuito generoso e edição em tempo real excelente. Payload CMS é TypeScript nativo e pode ser auto-hospedado. Para blogs mais simples, até mesmo arquivos MDX armazenados no seu repositório Git funcionam bem. A escolha correta depende do tamanho do seu time e da complexidade do conteúdo.

Como lido com formulários Webflow após a migração?

O tratamento de formulários do Webflow não é transferido. Em Next.js, você pode usar Server Actions (integrado ao Next.js 14+) para processar envios de formulário, ou integrar com serviços como Formspree, Resend, ou suas próprias rotas de API. Para formulários de contato, Server Actions com entrega de email via Resend é meu padrão -- é simples e mantém tudo em seu codebase.

Next.js é realmente melhor para SEO do que Webflow?

Depende do site. Para um site de marketing de 10 páginas sem lógica customizada, as ferramentas de SEO integradas do Webflow são honestamente suficientes. Mas para sites com muito conteúdo, sites que precisam de meta tags dinâmicas baseadas em contexto de usuário, ou sites onde performance de Core Web Vitals importa (dica: sempre importa), Next.js oferece mais controle. Renderização no servidor garante que Googlebot sempre veja HTML completamente renderizado, e você ganha controle programático sobre cada elemento de SEO.

Quanto custa migrar de Webflow para Next.js?

Um intervalo realista para um site de médio porte é $15.000-$40.000 para uma migração profissional incluindo preservação de SEO. Taxas de freelancer podem ser mais baixas ($5.000-$15.000) mas carregam mais risco se carecerem de experiência em migração. A maior variável de custo é se você precisa de integração CMS headless e quantas interações customizadas precisam ser reconstruídas.

Devo usar SSR ou SSG para meu site Next.js migrado?

Para a maioria dos sites de marketing migrados de Webflow, Static Site Generation (SSG) é o padrão correto. É mais rápido e mais barato de servir. Use SSR seletivamente para páginas que precisam de dados em tempo real -- como uma página de preços que puxa dados ao vivo de uma API. O App Router do Next.js 15 torna fácil misturar ambas as abordagens dentro do mesmo projeto usando componentes servidores e generateStaticParams.