Webflow zu Next.js migrieren: Ablauf, Kosten, Dauer und SEO-Sicherung (2026)
Wann sich der Wechsel von Webflow zu Next.js oder Astro lohnt, wie die Migration in sechs Phasen läuft, was aus Webflow übernommen wird und wie die Rankings den Umzug überstehen.
Eine Webflow-Website lässt sich zu Next.js migrieren, ohne Rankings zu verlieren: Die Inhalte wandern per CSV oder API aus dem Webflow-CMS in Sanity, das Design wird als Komponenten neu aufgebaut, jede alte URL bekommt eine 301-Weiterleitung, bevor die neue Website live geht. Bei einer Marketing-Website mit 10-30 Seiten dauert das typischerweise 3-6 Wochen. Der Wechsel lohnt sich, wenn du an CMS-Limits, Sprachkosten oder der Performance-Decke von Webflow angekommen bist. Er lohnt sich nicht, wenn die Website klein bleibt und dein Team den Designer gern nutzt. Der Artikel zeigt sieben Wechsel-Trigger, den Ablauf in sechs Phasen, was aus Webflow übernommen wird, welche Risiken wir abfangen, Kosten und Dauer, und den Referenzfall Yarowa.
Das Wichtigste in Kürze
- Der Wechsel lohnt sich ab einem von sieben Triggern, etwa 20.000 CMS-Items oder 40 Collections (Webflow Premium), 9-29 $ pro Sprache und Monat oder programmatische Seiten.
- Dauer: 3-6 Wochen für 10-30 Seiten, in sechs Phasen mit je einem prüfbaren Ergebnis.
- Jede alte URL bekommt eine 301-Weiterleitung, bevor die neue Website live geht. Das ist der einzige Schritt, der sich nicht verschieben lässt.
- Der Webflow-Export liefert HTML, CSS und JavaScript, aber keine CMS-Inhalte und keine lauffähigen Interaktionen. Inhalte kommen per CSV oder API, Animationen bauen wir nach.
- Laufende Plattformkosten danach: typischerweise 0-20 $ Hosting pro Monat statt 25-54 $ pro Website bei Webflow Premium mit Lokalisierung.
- Ohne App-Logik ist Astro statt Next.js oft das passendere Ziel. Yarowa: Webflow-Export 1:1 nach Astro portiert, 5 Sprachen, 21 Seiten-Templates.
Die kurze Antwort
Webflow zu Next.js migrieren lohnt sich, wenn deine Website an eine Webflow-Grenze stößt: 20.000 CMS-Items oder 40 Collections auf dem Premium-Plan, Lokalisierung für 9-29 $ pro Sprache und Monat, Anwendungslogik, die nur über Custom Code geht, oder eine Performance-Decke, weil die Interaktions-Runtime (webflow.js) auf jeder Seite lädt und du Caching und Bildpipeline nicht steuerst. Wer eine dieser Grenzen spürt, tauscht die Technik-Basis. Wer sie nicht spürt, bleibt auf Webflow.
Next.js steht in diesem Artikel für das Code-System als Ganzes: Ohne App-Logik, Login oder serverseitige Daten pro Anfrage bauen wir denselben Weg mit Astro, die sechs Phasen sind identisch. Die Migration läuft in sechs Phasen: Audit und Redirect-Map, Content-Modell in Sanity, Content-Migration, Frontend-Aufbau, SEO-Parität mit Launch-Checkliste, Monitoring nach dem Launch. Für eine Marketing-Website mit 10-30 Seiten rechnen wir mit 3-6 Wochen. Rankings bleiben erhalten, weil vor dem Launch jede alte URL ein Ziel hat und Titles, Metas, Schema und hreflang (die Angabe, welche Sprachversion einer Seite für welches Land gilt) 1:1 übernommen werden.
Die Projektkosten hängen an Seitenzahl, Sprachen und Interaktionen; die Spannen stehen auf unserer Seite zum Website-Relaunch und bei der Webentwicklung. Im Betrieb kostet die neue Website typischerweise 0-20 $ pro Monat, ohne Aufpreis pro Sprache.
Wann sich der Wechsel lohnt, und wann nicht
Wir sind zertifizierter Webflow-Partner und prüfen vor jeder Migration, ob sie nötig ist. Sieben Trigger sagen ja, drei sagen nein.
Wechsle zu Next.js oder Astro, wenn …
Diese sieben Auslöser sehen wir in Projekten am häufigsten. Einer genügt, wenn er dauerhaft gilt.
Die CMS-Limits sind erreicht
Webflow Premium erlaubt 20.000 Items und 40 Collections pro Website, dazu 40 Collection-Lists pro Seite und 100 Items pro Liste ohne Paginierung. Die Collection-Grenze trifft dich dabei meist vor der Item-Grenze: Jeder neue Inhaltstyp, vom Glossar über Cases bis zu Stellenanzeigen, belegt eine der 40.
Mehrsprachigkeit wird teuer oder unhandlich
Webflow-Lokalisierung kostet 9 $ pro Sprache und Monat (bis 3 Sprachen) oder 29 $ (bis 10). Ab der vierten Sprache greift der höhere Tarif, und die Sprachen stehen dann als eigener Posten neben dem Website-Plan Ob Webflow die Hauptsprache mitzählt, sagt die Preisseite nicht. In Sanity kostet eine weitere Sprache keinen Aufpreis.
Du willst programmatische Seiten oder ein KI-Content-System
Hunderte Seiten aus einem Template und strukturierten Daten (Branchen × Leistungen × Städte, Glossare), gepflegt von KI-Agenten über Sanity-API und Sanity-MCP-Server. Webflow hat ebenfalls API und MCP-Server. Der Unterschied: Item-Limits, Rate-Limits, Template-Grenzen, und kein Zugriff auf Rendering, Schema, Sitemap und interne Verlinkung auf Code-Ebene. Im Code-System ist das die Grundarchitektur. Bedingung: echte Substanz pro Seite, sonst wertet Google sie als Doorway-Pages ab. Das haben wir selbst erlebt.
Die Performance-Decke ist erreicht
webflow.js lädt auf jeder Seite, Caching-Header und Bildpipeline liegen außerhalb deiner Kontrolle. Was das in Zahlen heißt: leanwave.com, das wir statisch mit Astro bauen, lädt auf der Startseite rund 39 KB JavaScript in drei Dateien. Eine unserer Webflow-Seiten lädt an derselben Stelle rund 740 KB in dreizehn Dateien (eigene Messung, 13.09.2026). Was das für Rankings heißt, steht im Artikel zu Core Web Vitals.
Du brauchst Integrationen oder App-Logik
Login-Bereiche, Konfiguratoren, Echtzeit-Daten aus dem ERP. In Webflow ist das Custom Code auf einer Plattform, die dafür nicht gebaut ist. In Next.js ist es der Normalfall.
Hosting-Gebühren pro Website summieren sich
Webflow rechnet pro Website ab: Premium 25 $ pro Monat, dazu Workspace-Plan und Lokalisierung. Vercel Pro kostet 20 $ pro Entwickler-Seat, ohne Grundgebühr pro Projekt.
Das Lock-in-Risiko ist dir zu hoch
Der Webflow-Export enthält HTML, CSS und JavaScript, aber keine CMS-Inhalte und keine lauffähigen Interaktionen. Bei Next.js oder Astro mit Sanity liegen Code und Inhalte in deinem Repository und deinem Sanity-Projekt, das Hosting ist austauschbar.
Bleib auf Webflow, wenn …
Drei Konstellationen, in denen wir vom Wechsel abraten.
- Die Website hat bis etwa 30 Seiten, ein bis zwei Sprachen und keine programmatischen Seiten in Planung.
- Dein Marketing-Team baut Landingpages gern selbst im Designer und braucht diese Freiheit.
- Es gibt keine Skalierungspläne: kein Wissensbereich, keine programmatischen Seiten, keine Integrationen.
Dann ist Webflow die richtige Stufe, und wir helfen dir dort weiter, als Webflow-Agentur. Die Einordnung aller drei Stufen findest du im Hub Baukasten, Webflow oder Next.js, den direkten Vergleich unter Webflow vs. Next.js.
Der Ablauf in sechs Phasen
Phase 1 und 2 müssen vor dem Frontend stehen, der Rest überlappt. Die Wochenangaben sind Richtwerte innerhalb der 3-6 Wochen bis zum Go-Live; das Monitoring danach läuft zusätzlich.
Audit und Redirect-Map
Wir crawlen die Website mit Screaming Frog oder Ahrefs, exportieren alle URLs inklusive Collection-Seiten, ziehen einen Ranking-Snapshot und legen die Ziel-URL-Struktur fest. Jede alte URL bekommt ein Ziel: identisch, neu oder die thematisch nächste Seite. Nichts landet pauschal auf der Startseite. Dauer: Woche 1. Ergebnis: Redirect-Map als Tabelle (alte URL, neue URL, Status), Ranking-Snapshot, Ziel-Sitemap.
Content-Modell in Sanity
Jede Webflow-Collection wird ein Sanity-Dokumenttyp, jedes Feld ein Schema-Feld, jedes Referenzfeld eine echte Referenz. Sprachen werden als Dokument-Übersetzungen angelegt, wie bei LeanWave (Englisch auf der Wurzel, Deutsch unter /de). Sanity ist ein Headless-CMS: Es speichert nur Inhalte und liefert sie per API, das Aussehen bestimmt das Frontend. Mehr dazu unter Headless-CMS und Sanity CMS. Dauer: Woche 1-2. Ergebnis: Schema im Repository, Studio mit Presentation Mode als Rohbau.
Content-Migration
Webflow liefert CMS-Inhalte als CSV pro Collection oder per API. Ein Skript transformiert sie in NDJSON (ein Dokument pro Zeile) und spielt sie per `sanity dataset import` ein. Rich-Text wird zu Portable Text, Referenzen werden über die alten Slugs aufgelöst, Bilder heruntergeladen und neu hochgeladen. Dauer: Woche 2-3. Ergebnis: alle Inhalte in Sanity, Stichproben-Protokoll pro Collection.
Frontend-Aufbau
Komponenten entstehen aus Figma oder aus dem Webflow-Export. Interaktionen bauen wir mit GSAP oder CSS nach, nicht mit der Webflow-Runtime. Presentation Mode wird verdrahtet: Klick auf einen Text in der Live-Vorschau öffnet das Sanity-Feld, jede Änderung stößt per Webhook einen Rebuild an. Mehr im Artikel zu Website-Animationen. Dauer: Woche 2-5. Ergebnis: Preview-Deployment auf Vercel mit allen Templates.
SEO-Parität und Launch-Checkliste
Wir vergleichen alt und neu Seite für Seite: Title, Meta-Description, H1, Canonical (die Angabe, welche URL die Hauptversion ist), hreflang, Schema, Alt-Texte. Dann Sitemap, 301-Redirects aus der Map, robots.txt ohne noindex-Rest vom Staging, Core-Web-Vitals-Vergleich alt gegen neu, Einreichung in Google Search Console und Bing, IndexNow-Ping für alle URLs. Die Checkliste im Detail: Website-Relaunch ohne SEO-Verlust. Dauer: Woche 5-6. Ergebnis: abgehakte Launch-Checkliste, Go-Live.
Nach dem Launch
Zwei Wochen Monitoring: 404-Report aus Search Console und Vercel-Logs, fehlende Redirects sofort nachtragen, Ranking-Abgleich gegen den Snapshot aus Phase 1. Dauer: zwei Wochen nach dem Go-Live, zusätzlich zu den 3-6 Wochen. Ergebnis: Abschlussbericht mit Rankings vorher und nachher.
Was aus Webflow wie übernommen wird
Element für Element: was direkt mitkommt, was transformiert wird und was neu gebaut werden muss.
Was aus Webflow wie übernommen wird
| Element in Webflow | Ziel im neuen System | Aufwand |
|---|---|---|
| Statische Seiten (Start, Leistungen, Über uns) | Seiten-Templates plus Sanity-Dokument pro Seite | mittel, pro Template |
| CMS-Collections und Felder | Sanity-Dokumenttypen, Import per NDJSON | niedrig bis mittel, meist Skript |
| Referenz- und Multi-Referenz-Felder | Sanity-Referenzen, aufgelöst über alte Slugs | niedrig |
| Rich-Text-Felder | Portable Text (strukturierter Text statt HTML-Blob) | mittel, Konverter plus Stichproben |
| Bilder, Dateien, Videos | Sanity-Assets mit automatischer Bildoptimierung | niedrig, automatisiert |
| Design, Klassen, Styles | Komponenten mit Tailwind oder CSS, aus Figma oder Export | hoch, der größte Block |
| Interaktionen und Animationen | GSAP oder CSS-Animationen, nur wo nötig | mittel bis hoch, je Anzahl |
| Formulare | Eigene API-Route, Anbindung an CRM oder Mail | mittel |
| Lokalisierung | Sanity Document Internationalization, hreflang, übersetzte Slugs | mittel, kein Aufpreis pro Sprache |
| SEO-Felder, Redirects, Custom Code | Sanity-SEO-Objekt, Redirect-Konfiguration, Komponenten | niedrig |
Der Webflow-Export ersetzt das Frontend nicht. Er ist die Referenz für Layout und Styles, aus der Komponenten entstehen. Bei einem Redesign nimmst du stattdessen Figma als Quelle.
Risiken und wie wir sie abfangen
Ranking-Verlust. Ursache fast immer: fehlende Redirects, geänderte Titles, noindex aus dem Staging. Abfang: Redirect-Map vor dem Frontend-Aufbau, Paritäts-Check Seite für Seite, zwei Wochen Monitoring gegen den Ranking-Snapshot.
Design-Abweichung. Ein Neubau aus Komponenten weicht leicht vom Original ab: Abstände, Schriftschnitte, Hover-Zustände. Abfang: vor Phase 4 entscheiden, ob 1:1-Portierung oder Redesign, danach visuelle Abnahme pro Template gegen einen Screenshot der alten Seite. Bei Yarowa haben wir uns bewusst für die 1:1-Portierung des Exports entschieden, damit das Design unverändert bleibt.
Verlorene Interaktionen. Die Webflow-Runtime kommt nicht mit. Abfang: Inventar aller Interaktionen in Phase 1, Entscheidung pro Interaktion (nachbauen, vereinfachen, streichen), Nachbau mit GSAP oder CSS.
Formulare und Integrationen. Webflow-Formulare, Zapier-Hooks und Embeds hängen an der Plattform. Abfang: Liste aller Endpunkte in Phase 1, Neubau als API-Route, Test jeder Übermittlung.
Redirect-Ketten. Alte Webflow-Redirects zeigen auf URLs, die jetzt wieder umziehen. Abfang: alle bestehenden Redirects in die Map aufnehmen und auf das Endziel auflösen. Jede Kette wird ein einzelner 301.
Kosten und Dauer
Die Migration einer Marketing-Website mit 10-30 Seiten dauert bei uns typischerweise 3-6 Wochen. Treiber: Seitenzahl, Sprachen, Interaktionen, und ob das Design 1:1 bleibt.
Projektkosten: Wir rechnen eine Migration als Relaunch-Projekt ab, unsere Relaunch-Pakete starten bei 8.000 € netto. Die Spannen stehen auf der Relaunch-Seite und bei der Webentwicklung; wie sich Webentwicklungskosten zusammensetzen, erklärt der Artikel Webentwicklung Kosten.
Laufende Kosten danach: Sanity Free (20 Seats, 10.000 Dokumente, Presentation Mode enthalten) plus Vercel Pro mit 20 $ pro Entwickler-Seat, also 0-20 $ pro Monat. Webflow Premium: 25 $ plus 9-29 $ pro Sprache, pro Website.
Webflow zu Astro statt Next.js?
Für Marketing-Websites ohne Login, Echtzeit-Daten oder Server-Logik pro Anfrage bauen wir bevorzugt mit Astro: Die Seiten werden beim Build als fertiges HTML erzeugt, nur interaktive Teile laden JavaScript (Astro Islands). Next.js nehmen wir, wenn App-Logik dazukommt. Der Ablauf ist in beiden Fällen identisch, nur das Frontend-Framework wechselt. Yarowa ist der Beleg: Webflow-Export 1:1 nach Astro, 5 Sprachen, 21 Seiten-Templates, Design erhalten.
Unser Referenzfall
Yarowa (yarowa.com): Die Website eines internationalen B2B-Kunden war in Webflow gebaut. Wir haben den Export 1:1 nach Astro portiert und auf Vercel gehostet: 5 Sprachen, 21 Seiten-Templates, 163 Sections. Der nächste Schritt ist der Umbau auf Sanity mit Presentation Mode: Statt das Markup neu zu bauen, binden wir jeden Text über einen Feldpfad an Sanity, damit er in der Live-Vorschau editierbar wird, ohne das Design anzufassen.
in-sync.io (unsere Website): Der zweite Fall ist ein Wechsel aus einem Baukasten. Unsere Website lief bis 2026 auf Wix; heute laufen 49 Wissen-Artikel, 10 Service-Seiten und 17 Stadtseiten zweisprachig aus einer Sanity-Datenbank auf Next.js. Die Migration lief nach genau den sechs Phasen oben, inklusive Redirect-Map und Ranking-Snapshot. Die Details zu Rendering, Schema und Crawling stehen in technisches SEO und GEO.
Häufige Fragen
Ja. CMS-Inhalte kommen per CSV oder Webflow-API heraus und werden als NDJSON in Sanity importiert, das Design entsteht als Komponenten, Interaktionen werden mit GSAP oder CSS nachgebaut. Bei 10-30 Seiten dauert das 3-6 Wochen. Rankings bleiben, wenn jede alte URL vor dem Launch einen 301 hat.
Der Code-Export enthält HTML, CSS, JavaScript und Assets der statischen Seiten. Nicht enthalten: CMS-Inhalte als lauffähiges System, Interaktionen als eigenständige Logik, Formular-Verarbeitung. CMS-Inhalte holst du getrennt als CSV pro Collection oder per API. Plane also zwei Exportwege: Design und Inhalte.
Nicht, wenn drei Dinge stimmen: jede alte URL hat einen 301 auf ein passendes Ziel, Titles und Metas sind 1:1 übernommen, das Staging-noindex ist vor dem Launch entfernt. Wir prüfen das Seite für Seite und beobachten zwei Wochen lang 404-Report und Rankings gegen den Snapshot.
Ja, über Sanity Presentation Mode: Klick auf den Text in der Live-Vorschau öffnet das Feld, speichern, die Website baut sich per Webhook neu. Bei LeanWave läuft das mit 64 Dokumenten und 86 Bild-Assets. Das Layout bleibt geschützt, geändert werden Inhalte, nicht Strukturen.
Sie kommen nicht mit, weil sie an die Webflow-Runtime gebunden sind. Wir inventarisieren sie in Phase 1 und entscheiden pro Interaktion: nachbauen mit GSAP oder CSS, vereinfachen oder streichen. Erfahrungsgemäß bleibt nur ein Teil übrig, nämlich die Bewegungen, die für den Besucher etwas tun.
Astro, wenn die Website Inhalte zeigt und keine Anwendung ist: statisch gebaut, 0 KB JavaScript für statische Inhalte, PageSpeed-Werte nahe 100 in unseren Projekten. Next.js, wenn Login, Echtzeit-Daten oder Server-Logik pro Anfrage dazukommen. Yarowa läuft auf Astro, in-sync.io auf Next.js.
Nächster Schritt
Schick uns die URL deiner Webflow-Website, und wir sagen dir im Erstgespräch, ob sich der Wechsel lohnt und was er bei dir kostet. Button: „Migration besprechen" → /kontakt
Webflow vs. Next.js
Die Abwägung vor dem Wechsel, zehn Kriterien.
Website-Relaunch ohne SEO-Verlust
Die Checkliste, mit der Rankings den Umzug überstehen.
Webflow-Alternative 2026
Wann du Webflow verlässt, und wohin es dann geht.
301-Weiterleitungen richtig setzen
Statuscodes, Redirect-Map und die Fehler, die Rankings kosten.
CMS-Migration: Ablauf und Kosten
Der Überblick über jeden Systemwechsel, system-unabhängig.
