Van Webflow naar Next.js migreren zonder je SEO kapot te maken

Ik heb in de afgelopen drie jaar ongeveer vijftien sites van Webflow naar Next.js gemigreerd. Sommige verliepen vlekkeloos. Een paar waren pijnlijk. Eén was een echt nachtmerrie waarbij een klant zes weken lang 40% van het organische verkeer verloor omdat we een reeks omleidingsregels misten die verscholen zaten in Webflow's CMS-collectionpagina's. Die ervaring heeft me meer geleerd over SEO-behoud tijdens migraties dan welke documentatie dan ook.

Hier staat alles wat ik weet om dit goed te doen -- de technische stappen, de valkuilen waar niemand je voor waarschuwt, en het exacte proces dat we bij Social Animal gebruiken om ervoor te zorgen dat zoekrankings de overgang overleven.

Inhoudsopgave

• Waarom Webflow verlaten voor Next.js
• De echte kosten van migratie
• Pre-migratie SEO-audit
• Je Webflow-site exporteren
• De Next.js-vervanging bouwen
• De 301-omleidingsstrategie die echt werkt
• Webflow CMS-inhoud afhandelen
• SEO-monitoring na migratie
• Veelgemaakte fouten die rankings verwoesten
• Veelgestelde vragen

Waarom Webflow verlaten voor Next.js

Laat me duidelijk zijn: Webflow doet wat het doet echt goed. Het genereert schoon semantische HTML, behandelt metatags van nature, genereert automatisch XML-sitemaps en beheert robots.txt zonder dat je een configuratiebestand aanraakt. Voor een marketingsite die niet veel aangepaste logica nodig heeft, is het uitstekend.

Maar je leest dit artikel, wat betekent dat je waarschijnlijk tegen de muur aan bent gelopen. Hier is wat teams meestal naar Next.js duwt:

Prestatieplafonds. Webflow-sites met zware interacties, veel CMS-items of complexe animaties beginnen scheuren te vertonen in Core Web Vitals. We hebben Webflow-sites gezien met Largest Contentful Paint (LCP)-tijden boven de 4 seconden op mobiel -- ver voorbij Googles drempel van 2,5 seconden. Een goed gebouwde Next.js-site met server-side rendering en next/image-optimalisatie halveert dat meestal.

Aanpassingsbeperkingen. Moet je een headless CMS als Sanity of Contentful integreren? Wil je een aangepaste checkoutflow bouwen? Heb je middleware nodig voor A/B-tests aan de edge? Webflow's omsloten tuin voelt ineens erg klein.

Kosten op schaal. Webflow's CMS-plan kost €29/maand voor een enkele site, maar bedrijfsfeatures duwen dat naar €49+/maand. Als je meerdere sites of localiseringsbehoeften hebt, begint het hosten van een Next.js-app op Vercel's Pro-plan voor €20/maand slim uit te zien -- vooral omdat je edge-functions, analytics en preview-implementaties inbegrepen krijgt.

De prestatiegegevens ondersteunen dit. Webflow's eigen engineering-team documenteerde een 20% verbetering in laadtijden toen ze hun dashboard naar Next.js migreerden met SSR. In 2025-benchmarks scoren Next.js 15-sites die de App Router gebruiken consistent 15-25% hoger op Lighthouse dan gelijkwaardige Webflow-builds met complexe interacties.

Als je geïnteresseerd bent in wat mogelijk is met een moderne Next.js-stack, beschrijven we onze aanpak op onze Next.js-ontwikkelingsmogelijkheden-pagina.

De echte kosten van migratie

Laten we het over geld hebben voordat we het over code hebben. Ik heb te veel teams een migratie zien starten zonder de volledige investering te begrijpen.

Onderdeel	Geschatte kosten	Opmerkingen
Webflow-export en content-audit	€1.000 – €3.000	Handwerk; Webflow-export mist CMS-gegevens
Next.js-ontwikkeling (10-20 pagina's)	€8.000 – €25.000	Hangt af van complexiteit, interacties, integraties
Next.js-ontwikkeling (20-50 pagina's)	€20.000 – €60.000	Enterprise-sites met CMS, authenticatie, aangepaste logica
Headless CMS-setup	€2.000 – €8.000	Sanity, Contentful of Payload CMS-configuratie
SEO-omleidingsmapping en QA	€1.500 – €4.000	Het belangrijkste regelitem op deze lijst
Vercel/Netlify-hosting (maandelijks)	€20 – €150/mnd	Vervangt Webflow's €29-€49/mnd hosting
Post-migratiemonitoring	€500 – €2.000	4-8 weken Search Console-monitoring

Voor een typische middelgrote marketingsite met 30 pagina's en een blog, kijk je naar €15.000–€40.000 in totaal. Dat is niet goedkoop. Maar als je Webflow-site significant organisch verkeer genereert, zijn de kosten van een mislukte migratie veel hoger.

We publiceren transparante prijzen voor projecten als deze op /pricing -- het is de moeite waard om te checken als je een realistisch bereik wilt voor je specifieke situatie.

Pre-migratie SEO-audit

Dit is waar de meeste mensen stappen overslaan, en het is waar de meeste migraties mislukken. Voordat je een enkele regel Next.js-code schrijft, heb je een volledig overzicht van je huidige SEO-voetafdruk nodig.

Alles crawlen

Voer Screaming Frog (of Sitebulb of Ahrefs Site Audit) uit op je live Webflow-site. Exporteer elke URL. Ik bedoel elke URL -- pagina's, CMS-items, gepagineerde archiefpagina's, hulppagina's, alles.

Je hebt nodig:

• Volledig URL-inventaris -- elke pagina die een 200-status retourneert
• Titeltags en metabeschrijvingen voor elke pagina
• Canonieke URL's -- Webflow stelt deze soms vreemd in op collectionpagina's
• Interne linkstructuur -- welke pagina's linken naar welke
• Gestructureerde gegevens -- enig schemamarkup dat Webflow genereert
• Core Web Vitals-basislijn -- voer PageSpeed Insights uit op je top 20-pagina's

Documenteer je toppresteerders

Open Google Search Console. Ga naar Prestaties. Sorteer op klikken voor de afgelopen 12 maanden. Exporteer deze gegevens. Dit zijn de pagina's die je absoluut niet kunt breken.

Ik maak meestal een spreadsheet met kolommen als deze:

URL | Maandelijkse klikken | Topqueries | Gem. positie | Prioriteit
/blog/seo-guide | 2.400 | "seo guide 2025" | 3,2 | KRITIEK
/pricing | 890 | "agency pricing" | 5,1 | HOOG
/about | 340 | "social animal dev" | 1,0 | GEMIDDELD

Elke pagina in de KRITIEK- en HOOG-categorieën krijgt handmatige aandacht tijdens migratie. Geen geautomatiseerde bulk-omleidingen. Geen aannames.

Sla je backlink-profiel op

Voer een Ahrefs- of SEMrush-backlink-rapport uit. Als externe sites naar specifieke Webflow-URL's linken (vooral blogposts of resourcepagina's), moeten die URL's na migratie correct oplossen -- ofwel op hetzelfde pad ofwel via een 301-omleiding.

Je Webflow-site exporteren

Webflow's export-functie is... beperkt. Dit is wat je echt krijgt en wat niet.

Wat de export bevat

Op een CMS- of Business-plan, door op Export Code in Project Settings te klikken, krijg je een ZIP met:

• Statische HTML-bestanden voor elke pagina
• CSS (inclusief Webflow's hulpklassen)
• JavaScript (Webflow's runtime + je aangepaste code)
• Afbeeldingen en andere geüploade assets

Wat de export niet bevat

Dit is het kritieke gedeelte: Webflow's CMS-gegevens komen niet met de export mee. Je blogposts, teamleden, casestudies -- elke inhoud in CMS Collections opgeslagen -- verschijnt niet als afzonderlijke HTML-bestanden op een handige manier. Ze zullen in de geëxporteerde HTML als statische inhoud worden ingesloten, maar je verliest de gestructureerde gegevens.

Om je CMS-inhoud correct te exporteren:

1. Gebruik Webflow's CMS API om collection-items als JSON op te halen
2. Exporteer collections als CSV vanuit Webflow Designer (Collection Settings → Export)
3. Gebruik een tool als Whalesync of Make.com om CMS-gegevens in je nieuwe headless CMS te pipen

Hier is een quick script om Webflow CMS-items via hun API op te halen:

// 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();

Vertrouw niet alleen op de HTML-export. Parse de geëxporteerde bestanden met iets als Cheerio als je inhoud uit de statische HTML moet halen, maar de API-route is schoner.

De Next.js-vervanging bouwen

Nu de echte bouw. Ik ga ervan uit dat je Next.js 14 of 15 gebruikt met de App Router -- als je in 2025 vers begint, is er geen reden om de Pages Router te gebruiken.

URL-structuurkaart

Dit is niet onderhandelbaar: je nieuwe URL-structuur moet waar mogelijk overeenkomen met de oude. Elke URL-wijziging is een risico. Als je Webflow-blog op /blog/post-slug staat, moet je Next.js-blog op /blog/post-slug staan.

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

Metadata-implementatie

Next.js 15's metadata-API is echt beter dan wat Webflow je geeft. Je krijgt volledige programmatische controle en alles wordt server-side gerenderd -- wat betekent dat Googlebot het ziet op de eerste paint.

// 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>
  );
}

Let op dat de canonieke URL expliciet is ingesteld. Laat dit niet aan het toeval over. Webflow behandelt canonicals automatisch; in Next.js moet je intentioneel zijn.

Prestatie-optimalisatie

Twee dingen die het grootste verschil maken tegenover Webflow:

Afbeeldingsoptimalisatie met 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"
/>

Lettertype-optimalisatie met next/font:

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

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

Deze twee optimalisaties alleen schaven meestal al 1-2 seconden van de LCP af vergeleken met Webflow's standaard lettertype- en afbeeldingsverwerkingen.

Voor teams die het headless CMS-gedeelte overwegen, behandelen we dat integratiewerk op onze headless CMS-ontwikkelings-pagina.

De 301-omleidingsstrategie die echt werkt

Dit is het gedeelte dat je rankings redt. Ik ga hier pijnlijk grondig zijn omdat ik te veel migraties heb zien mislukken bij de implementatie van omleidingen.

Bouw een volledige omleidingskaart

Pak je Screaming Frog-crawl uit de auditfase. Voor elke URL die op de Webflow-site bestaat, heb je exact één van deze resultaten nodig:

1. Dezelfde URL op Next.js -- geen omleiding nodig, maar verifieer dat het werkt
2. Andere URL op Next.js -- 301-omleiding van oud naar nieuw
3. Pagina verwijderd -- 301-omleiding naar de meest relevante bestaande pagina

Retourneer nooit een 404 voor een pagina die eerder verkeer of backlinks had. Nooit.

Implementeer in 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;

En je redirects.json:

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

Gebruik padovereenkomstpatronen voor bulk-omleidingen waar URL-structuren systematisch veranderden. Maar test deze altijd individueel -- patroonmatching kan omleidingslussen veroorzaken als je niet voorzichtig bent.

De Webflow-specifieke valkuil

Webflow voegt schuine strepen toe aan URL's. Next.js doet dit standaard niet. Dit betekent dat yoursite.com/about/ (Webflow) en yoursite.com/about (Next.js) technisch verschillende URL's zijn.

Voeg in je next.config.js dit toe:

const nextConfig = {
  trailingSlash: false, // of true -- zorg gewoon voor consistentie
  // ...
};

Voeg vervolgens expliciete omleidingen toe voor schuine streep-varianten van je pagina's met het meeste verkeer. Google zal het uiteindelijk door canonicals uitzoeken, maar expliciete 301's versnellen het proces aanzienlijk.

Webflow CMS-inhoud afhandelen

Als je een Webflow CMS-blog met 200 posts had, heb je ergens voor die inhoud nodig. Je hebt in 2025 een paar solide opties:

CMS	Prijzen (2025)	Best voor	Inspanning voor migratie
Sanity	Gratis tier → €99/mnd (Growth)	Complexe content-modellen, real-time samenwerking	Gemiddeld
Contentful	Gratis tier → €300/mnd (Team)	Enterprise-teams, meertaligheid	Gemiddeld-Hoog
Payload CMS	Zelf gehost (gratis) of Cloud €30/mnd+	Volledige controle, TypeScript-native	Hoger initieel, lager doorlopend
MDX-bestanden in repo	Gratis	Kleine blogs (<100 posts)	Laag

Voor de meeste Webflow-naar-Next.js-migraties recommandeer ik Sanity. De schemaaflexibiliteit past goed bij Webflow's collectionstructuur en er zijn community-tools voor het importeren van Webflow-gegevens. Payload CMS wordt steeds populairder voor teams die alles in TypeScript willen -- het is de moeite waard om te evalueren als je een aangepaste stack bouwt.

Het cruciale: welke CMS je ook kiest, zorg ervoor dat je blogpost-slugs exact overeenkomen. /blog/my-great-post op Webflow moet /blog/my-great-post zijn op Next.js, trekkend uit je nieuwe CMS.

SEO-monitoring na migratie

Launchdag is niet het einde. Het is het begin van een monitoringperiode van 4-8 weken.

Week 1: Onmiddellijke acties

1. Dien je nieuwe sitemap in bij Google Search Console (https://yoursite.com/sitemap.xml)
2. Vraag indexering aan voor je top 20-pagina's met URL Inspection
3. Monitor het Coverage-rapport -- kijk uit naar pieken in 404-fouten
4. Controleer omleidingsketens -- gebruik Screaming Frog om de live site te crawlen en verifieer dat elke omleiding in één hop oplost

Weken 2-4: Ranking-herstel

Verwacht een tijdelijk dip. Ik heb gezien dat rankings zelfs met perfecte omleidingen in de eerste twee weken met 5-15 posities dalen. Geen paniek. Google moet herbladijden, herver werken en rankingsignalen opnieuw toewijzen.

Waar op letten:

• Aantal geïndexeerde pagina's in Search Console -- zou binnen 2 weken moeten stabiliseren
• Click-through rates -- als de CTR aanzienlijk daalt, moeten je metabeschrijvingen mogelijk worden aangepast
• Core Web Vitals -- je Next.js-site zou beter moeten scoren; verifieer in het CWV-rapport van Search Console

Weken 4-8: Bevestiging

Tegen week 4 zouden je rankings moeten herstellen. Tegen week 8 zouden ze gelijk moeten zijn aan of hoger dan je pre-migratie-basislijn. Hvis ze niet tegen week 6 zijn hersteld, klopt er iets niet -- controleer op gemiste omleidingen, canonieke problemen of rendering-problemen.

Veelgemaakte fouten die rankings verwoesten

Vergeten over Webflow's auto-gegenereerde pagina's. Webflow maakt pagina's die je misschien niet aanneemt -- /blog (de collection-listing), gepagineerde pagina's als /blog?page=2, tag/categoryfilter-pagina's. Wijs ze allemaal in kaart.

Niet overeen laten komen met koppelings-hiërarchie. Als je Webflow-site <h1>-tags had op blogposts die Google gebruikte voor featured snippets, moet je Next.js-site dezelfde hiërarchie hebben. Wikkel je titel niet per ongeluk in een <h2> omdat je layoutcomponent al ergens een <h1> heeft.

Client-side renderen voor kritieke inhoud. Dit is de grote. Als je Next.js-pagina's een lege shell laden en vervolgens client-side inhoud halen, ziet Googlebot je inhoud misschien niet betrouwbaar. Gebruik servercomponenten (de standaard in App Router) of generateStaticParams voor statische generatie. SSR is waarom je naar Next.js bent verhuisd -- gebruik het.

Open Graph en social previews negeren. Webflow genereert OG-tags automatisch. Als je gedeelde blogposts ineens verbroken voorvertoningen op LinkedIn en Twitter laten zien, verlies je sociaal verkeer dat indirect SEO beïnvloedt.

Domeinen wijzigen tijdens migratie. Vermijd zo mogelijk niet je domein tegelijk met je platform te wijzigen. Elke wijziging is een onafhankelijke risicofactor. Migreer platforms eerst, laat rankings stabiliseren, overweeg vervolgens een domeinwijziging als een apart project.

Als dit overweldigend voelt, is dat normaal. Migratieprojecten zijn waar ervaring het meest uitmaakt. We hebben genoeg van deze projecten gedaan om een betrouwbaar proces te hebben -- bereik ons via onze contactpagina als je je specifieke situatie wilt bespreken.

Veelgestelde vragen

Hoe lang duurt een Webflow-naar-Next.js-migratie? Voor een typische marketingsite met 20-40 pagina's en een blog, verwacht je 6-12 weken van audit tot lancering. Het ontwikkelingen werk zelf kan 4-8 weken duren, maar je hebt tijd nodig voor de SEO-audit van tevoren en daarna monitoring. Een migratie overhaast doen is hoe je rankings verliest.

Verlies ik mijn SEO-rankings bij migratie van Webflow? Niet als je het goed doet. Met juiste 301-omleidingen, overeenkomende URL-structuren en gelijkwaardige on-page SEO-elementen zouden je rankings binnen 4-8 weken moeten herstellen. Sommige sites zien zelfs verbeteringen omdat Next.js betere Core Web Vitals-scores oplevert. De sleutel is nooit een eerder geïndexeerde URL een 404 laten retourneren.

Kan ik mijn Webflow-sitecode exporteren en in Next.js gebruiken? Technisch ja -- Webflow exporteert schoon HTML, CSS en JavaScript. Maar praktisch zou je dat niet willen. De geëxporteerde code van Webflow gebruikt zijn eigen klassenamen en runtime-scripts die niet schoon toewijzen aan React-componenten. Het is beter om je UI in React/Next.js opnieuw te bouwen met de Webflow-export als visuele referentie en vervolgens de inhoud apart te migreren.

Welke headless CMS moet ik gebruiken om Webflow's CMS te vervangen? Sanity en Payload CMS zijn de populairste keuzes in 2025 voor Next.js-projecten. Sanity biedt een genereuze gratis tier en uitstekende real-time bewerking. Payload CMS is TypeScript-native en kan zelf-gehost worden. Voor eenvoudiger blogs werken zelfs MDX-bestanden opgeslagen in je Git-opslagplaats goed. De juiste keuze hangt af van je teamgrootte en content-complexiteit.

Hoe ga ik met Webflow-formulieren om na migratie? Webflow's formulierverwerking wordt niet overgedragen. In Next.js kun je Server Actions (ingebouwd in Next.js 14+) gebruiken om inzendingen te verwerken, of integratie met services als Formspree, Resend of je eigen API-routes. Voor contactformulieren is Server Actions met e-mailbezorging via Resend mijn favoriet -- het is eenvoudig en houden alles in je codebase.

Is Next.js echt beter voor SEO dan Webflow? Dat hangt af van de site. Voor een 10-pagina marketingsite zonder aangepaste logica zijn Webflow's ingebouwde SEO-tools eerlijk gezegd voldoende. Maar voor content-zware sites, sites die dynamische metatags nodig hebben op basis van gebruikerscontext, of sites waar Core Web Vitals-prestaties belangrijk zijn (hint: dat is altijd het geval), geeft Next.js je meer controle. Server-side rendering zorgt ervoor dat Googlebot altijd volledig gerenderd HTML ziet, en je krijgt programmatische controle over elk SEO-element.

Hoeveel kost het om van Webflow naar Next.js te migreren? Een realistisch bereik voor een middelgrote site is €15.000-€40.000 voor een professionele migratie inclusief SEO-behoud. Freelancer-tarieven kunnen lager zijn (€5.000-€15.000) maar dragen meer risico als ze geen migratieervaring hebben. De grootste kostvariabele is of je een headless CMS-integratie nodig hebt en hoeveel aangepaste interacties opnieuw moeten worden gebouwd.

Moet ik SSR of SSG gebruiken voor mijn gemigreerde Next.js-site? Voor de meeste gemigreerde marketingsites is Static Site Generation (SSG) het juiste standaard. Het is sneller en goedkoper om te serveren. Gebruik SSR selectief voor pagina's die real-time gegevens nodig hebben -- zoals een prijspagina die live gegevens uit een API trekt. Next.js 15's App Router maakt het gemakkelijk om beide benaderingen in hetzelfde project te mengen met servercomponenten en generateStaticParams.