Von WordPress zu Next.js: Migration Guide für den Anbau von SaaS
Ich habe mit über 200 SaaS-Unternehmen zusammengearbeitet. Jeder von ihnen begann mit WordPress. Warum? Es ist billig. Es ist einfach. Es gibt Tausende von Plugins. Aber wenn Sie 10.000 monatliche Besucher treffen, erscheinen die Risse. Die Seitengeschwindigkeit sinkt. PHP-Scripts verlangsamen Ihre Datenbank. Ihr Marketingteam kann den Checkout-Flow nicht anpassen. Sie brauchen einen modernen Stack.
Methodische Anmerkung: Migrationsschritte, Zeitleisten und die zitierten Verbesserungen von 60% Ladezeit / 40% SEO-Score spiegeln DG10 SaaS-Migrationen von Januar bis August 2026 wider (Contentful, Sanity, Strapi Backends). Tool-Referenzen und Free-Tier-Details wurden erneut überprüft September 2026.
Dieser Leitfaden richtet sich an SaaS-Gründer, CTOs und leitende Ingenieure. Ich zeige Ihnen genau, wie Sie von WordPress zu Next.js migrieren können, ohne Traffic, SEO oder Gesundheit zu verlieren.
Warum WordPress für SaaS fehlschlägt
WordPress unterstützt 43% aller Websites. Das ist eine Tatsache vonW3TechsAber für SaaS-Anwendungen ist es eine Haftung.
Langsame Seitenladungen.Eine typische WordPress-Site mit 30 Plugins lädt in 4,2 Sekunden. Das ist lautGoogles PageSpeed InsightsFür SaaS kostet jede zusätzliche Sekunde 7% der Conversions (Quelle:Akamai).
Sicherheitslöcher.52% der WordPress-Schwachstellen stammen von Plugins (Quelle:WPScan. Für SaaS, der mit Benutzerdaten umgeht, ist das eine Klage, die darauf wartet.
Kein dynamisches Routing.WordPress wurde für Blogs entwickelt. SaaS benötigt benutzerdefinierte Dashboards, Benutzerprofile und Echtzeit-Updates. Sie hacken es mit benutzerdefinierten post-typen und plugin nach plugin.
Datenbanken brechen.WordPress verwendet MySQL. Ihr SaaS wächst, Ihre Datenbankanfragen wachsen. Bei 50.000 Benutzern dauert das Laden Ihres Admin-Panels 8 Sekunden. Ich habe es gesehen.
Next.js löst dies. Es ist ein React-Framework, das auf Node.js läuft. Es bietet Ihnen serverseitiges Rendering, statische Site-Generierung und API-Routen. Das bedeutet schnellere Seiten, weniger Sicherheitsprobleme und bessere Skalierbarkeit.
Was ist ein Headless CMS und warum Sie eines brauchen
Wenn Sie zu Next.js migrieren, trennen Sie das Front-End vom Back-End. Das ist „headless. WordPress wird zu Ihrem Content Management System (CMS), aber nicht zu Ihrer Präsentationsschicht. Oder Sie wechseln zu einem dedizierten Headless CMS.
Ein Headless CMS speichert Inhalte und liefert sie über APIs. Next.js zieht diese Inhalte zur Build-Zeit oder zur Anforderungszeit ab. Leistungen:
- Schnellere Builds.Content-Updates regenerieren nicht die gesamte Website.
- Multichannel.Gleiche Inhalte für Web, mobile App und API.
- Sicherheit.Kein öffentliches Admin-Dashboard. Keine Plugin-Schwachstellen.
Die zwei beliebtesten Headless CMS für Next.js sindKonsequentundGesundheitBeide haben freie Ebenen, die kleine SaaS unterstützen. In diesem Handbuch zeige ich Ihnen, wie Sie WordPress-Inhalte in eines davon migrieren können.
Migration Blueprint: Schritt für Schritt
Ich habe diese Migration für 7 SaaS-Unternehmen durchgeführt. Hier ist die genaue Blaupause.
Schritt 1: Überprüfen Sie Ihre aktuelle WordPress Site
Export einer Liste von:
- Posts und Seiten (count)
- Benutzerdefinierte Posttypen (z. B. "Fallstudien", "Produkte")
- Mediendateien (Bilder, PDFs)
- Kategorien und Tags
- Benutzerrollen und Berechtigungen
- Aktive Plugins (Liste jedes einzelne)
Beispiel:Ein Client hatte 800 Blog-Posts, 12 benutzerdefinierte Post-Typen und 47 aktive Plugins. Wir schneiden das auf 4 Plugins nach der Migration.
Schritt 2: Wählen Sie Ihr Headless CMS
Sie haben zwei Wege:
Pfad A: Behalte WordPress als Backend.Verwenden Sie dieWP REST APIInhalte Next.js auszusetzen. Dies funktioniert bei kleinen Migrationen, trägt aber immer noch die Datenbanklast von WordPress.
Pfad B: Migration zu einem neuen Headless CMS.Ich empfehleKonsequentfür strukturierte Inhalte.Gesundheitist besser für Teams, die die volle Kontrolle über den Content-Editor haben möchten.
Pfad C: Verwenden Sie ein statisches CMS wieStrapi.Open Source, selbst gehostet. Funktioniert gut für SaaS mit einem Budget.
Für diesen Leitfaden verwenden wir Contentful. Sie bieten eine kostenlose Ebene mit 5 Benutzern und 10.000 Datensätzen.
Schritt 3: WordPress-Inhalte exportieren
Führen Sie das native Export-Tool WordPress aus:Werkzeuge>AusfuhrenWählen Sie „Alle Inhalte. Sie erhalten eine XML-Datei.
Für größere Websites (50.000 + Posts), verwenden Sie dieWP-CLIBefehl:
wp export --filters=post_type=post --dir=/path/to/export
Ich habe dies für einen SaaS-Client mit 120.000 Blog-Posts verwendet. Es dauerte 6 Stunden. Das Ergebnis war eine 800 MB XML-Datei.
Schritt 4: Importieren Sie in Ihr Headless CMS
Contentful bietet ein Import-Tool namensContentful ImportSie müssen das WordPress XML in ein JSON-Format umwandeln, das mit dem Content-Modell von Contentful kompatibel ist.
Drehbuchidee:Schreiben Sie ein Node.js- oder Python-Skript mitxml2jsBibliothek. Karte WordPress Felder auf Contentful Felder.
- WordPress
post_title→ Contentfultitle(Kurztext) post_content→body(Reicher Text)post_excerpt→excerpt(Langer Text)post_date→publishDate(Datum)categories→category(Bezugsfeld)tags→tags(Bezugsfeld)- Ausgewähltes Bild →
featuredImage(Medienfeld)
Ich verwende eine modifizierte Version desWordPress Inhaltlicher WandererOpen-Source-Tool. Es verarbeitet 80% des Mappings.
Zeitschätzung:2-5 Tage für eine Website mit mehr als 1.000 Posts.
Schritt 5: Projekt Next.js einrichten
Initialisieren Sie ein Next.js-Projekt:
npx create-next-app@latest my-saas-site --typescript
Installieren Sie das Contentful SDK:
npm install contentful
Erstellen einer Dateilib/contentful.ts:
import { createClient } from 'contentful'
const client = createClient({
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
})
export default client
Jetzt können Sie Inhalte überall abrufen.
Schritt 6: Erstellen von Seiten mit Next.js
VerwendunggetStaticPropsodergetServerSidePropsSie holen Inhalte aus Contentful und rendern sie. Für Blogposts:
export async function getStaticProps({ params }) {
const { items } = await client.getEntries({
content_type: 'blogPost',
'fields.slug': params.slug,
})
return { props: { post: items[0].fields } }
}
Performance win:Next.js generiert statische Seiten zur Buildzeit. Ihr Blog lädt in weniger als 300ms statt 4 Sekunden.
Hier sind echte Daten von einem Client nach der Migration:
| Metrisch | WordPress | Next.js (statisch) |
|---|---|---|
| Seitenladezeit | 4.3s | 0,8 s |
| Zeit zum Interaktivieren | 6.1s | 1.2s |
| Lighthouse Performance Score | 42 | 89 |
| SEO Score (Semrush) | 68 | 92 |
| Absprungrate | 58% | 34% |
| Umrechnungskurs | 1.9% | 3.6% |
Quelle:interne Daten vom DG10 Agency-Client, anonymisiert.
Schritt 7: Behandeln Sie dynamische Routen und Benutzer-Dashboards
SaaS Apps benötigen benutzerspezifische Seiten. Next.js unterstützt dynamische Routen mit[slug].tsxoder[id].tsx. Für Benutzer-Dashboards, VerwendunggetServerSidePropsum Benutzerdaten aus Ihrem Backend abzurufen.
Beispiel:/dashboard/[userId].tsxholt Kontoinformationen und macht eine personalisierte Seite.
Schritt 8: Einrichten von SEO und Weiterleitungen
WordPress URLs haben sich möglicherweise geändert. Sie müssen 301-Weiterleitungen einrichten, um 404-Fehler zu vermeiden.
In Next.js verwendennext.config.js:
async redirects() {
return [
{ source: '/old-wordpress-page', destination: '/new-page', permanent: true },
]
}
Für SEO Meta-Tags verwenden Sie dienext/headBauteil odernext-seoPackung.
Ergebnis:Nach der Migration sahen wir einen Anstieg des organischen Traffics um 12% innerhalb von 30 Tagen aufgrund schnellerer Ladezeiten.
Schritt 9: Start und Überwachung
Einsatz aufVerceloderNetlifyBeide sind für Next.js optimiert.
Überwachung einrichten:
- Cronjob: Lauf
npm run buildtäglich neue Inhalte von Contentful abrufen. - AnalytikVerwenden Sie Google Analytics 4 oder Plausible.
- FehlerverfolgungSentry oder LogRocket.
Häufige Fehler und wie man sie vermeidet
Fehler 1: Migration aller Inhalte vor dem Testen.Beginnen Sie mit 10 Seiten. Validieren Sie SEO, Geschwindigkeit und Benutzererfahrung. Dann skalieren.
Fehler 2: Ignorieren der Bildoptimierung.WordPress speichert oft riesige Originalbilder. Verwenden Sie ein CDN wieBewölktoderImgixNext.js kann auchnext/imagezur automatischen Optimierung.
Fehler 3: Formulare nicht behandeln.WordPress-Formulare (z. B. Kontaktformular 7) funktionieren nicht in Next.js. VerwendungFormspreeoder bauen Sie Ihre eigene API-Route.
Fehler 4: Backup vergessen.Halten Sie die alte WordPress-Site mindestens 30 Tage nach der Migration live. Sie werden Redirects und Inhaltsfehler beheben.
Häufig gestellte Fragen
Wie viel kostet eine WordPress zu Next.js Migration?
Eine SaaS-Marketing-Website läuft in der Regel $ 15K bis $ 40K mit einer Agentur, angetrieben von Seitenzahl, CMS-Modellierung Komplexität und Integrationsfläche. Headless CMS-Lizenzierung (Contentful, Sanity) und Hosting (Vercel, Netlify) fügen wiederkehrende Zeilen hinzu - bestätigen Sie die Free-Tier-Limits gegenüber Ihren Rekordzahlen vor der Budgetierung. Holen Sie sich die Umleitungskarte und Analyseparität schriftlich als Ergebnisse, nicht als Annahmen.
Werden wir SEO-Rankings während der Migration verlieren?
Eine geplante Migration wackelt für zwei bis sechs Wochen und erholt sich dann bei leistungsgesteuerten Abfragen über dem Ausgangswert. Verluste werden nur dann dauerhaft, wenn Umleitungskarten übersprungen werden oder die Analyseparität verloren geht - beides wird im obigen Zeitleistenabschnitt behandelt. Sehen Sie sich die Indexabdeckung der Search Console wöchentlich für 60 Tage an; Flat Coverage plus Wiederherstellungsklicks bedeutet, dass Sie das Schlimmste durchmachen.
Welches Headless CMS sollten wir wählen: Contentful, Sanity oder Strapi?
Befriedigend für Teams, die eine verwaltete Infrastruktur und eine kostenlose Stufe zum Starten wünschen; Sanity für Editor-Erfahrung und Echtzeit-Zusammenarbeit; Strapi für selbst gehostete Kontrolle. Dieses Handbuch verwendet Contentful (5 Benutzer, 10.000 Datensätze freie Stufe ab September 2026), aber das Migrationsmuster wird übertragen.
Können wir schrittweise statt alle auf einmal migrieren?
Ja — Seite für Seite abgeschnitten, beginnend mit Top-Traffic-Vorlagen, wobei WordPress und Next.js nebeneinander hinter inszenierten Redirects ausgeführt werden. Inkrementeller Cutover ist, wie unsere 12.000-seitige Unternehmensmigration ohne Verkehrsklippe ausgeliefert wird.
Brauchen wir React-Entwickler später im Team?
Jemand muss das Frontend besitzen - entweder interne React-Kapazität oder einen Wartungshalter. Wenn Ihr Team null JavaScript hat, berücksichtigen Sie die laufende Unterstützung in die Entscheidung; die Leistungssteigerungen bleiben nur bestehen, wenn die Codebasis schlank bleibt. Eine vierteljährliche Abhängigkeit und Bundle-Budget-Überprüfung ist die minimal tragfähige Wartung.
Weiterlesen über DG10
- Next.js vs WordPress für Unternehmen
- Core Web Vitals Fix: Entwicklerhandbuch zu Lighthouse 95
- AI Agents für Workflow Automation
Wie lange dauert die Migration: Realistische Zeitlinien
Planen Sie für eine SaaS-Marketingseite unter 200 Seiten 6 bis 10 Wochen: zwei Wochen für Content-Audit und Headless-CMS-Modellierung, drei bis vier für Komponenten-Builds und Datenmigration und zwei für Redirects, QA und Staged Cutover. Größere Kataloge mit dynamischen App-Seiten laufen 12 bis 16 Wochen - das gleiche 8 bis 16-wöchige Band, in dem unsere Enterprise-Migrationsarbeit landet. Die Phasenteams unterschätzen immer die Content-Modellierung: Mit WordPress können Sie die Struktur pro Seite improvisieren, während ein Headless-CMS Sie zwingt, sie im Voraus zu definieren, und diesen Schritt eine Woche zu sparen, um einen Monat später zu kosten.
Schützen Sie die SEO-Kontinuität mit einer Umleitungskarte, die erstellt wurde, bevor eine einzelne Seite migriert wird - jede indizierte URL erhält ein 1:1-Ziel, das in der Staging mit einem Crawler verifiziert und dann in der Search Console 60 Tage nach dem Start überwacht wird. Erwarten Sie ein zwei- bis sechswöchiges Verkehrswackeln, selbst bei sauberen Migrationen; Was die Wiederherstellungen von dauerhaften Verlusten trennt, ist, ob Crawl-Statistiken und Indexabdeckung wöchentlich beobachtet werden. Versenden Sie die Migration mit Analyseparität (gleiche Ereignisse, gleiche Trichter), so dass die Performance-Story - diese 60% Ladezeitverkürzung - in Ihren eigenen Daten nachgewiesen werden kann, nicht nur in unseren.
SEO Audit vor der Migration: Was Sie erfassen sollten, bevor Sie sich bewegen
Bevor Sie Code berühren, frieren Sie eine Baseline ein, mit der Sie sechs Monate vergleichen können: vollständiges URL-Inventar aus der Sitemap plus Search Console, Traffic und Conversions pro Vorlage (nicht nur pro Seite), Core Web Vitals nach Vorlage von CrUX und das vollständige Redirect- und Backlink-Profil pro URL. Die meisten Teams überspringen den Schnitt pro Vorlage und bedauern es - Migrationen verschieben selten jede Vorlage gleichermaßen, und ohne Vorlagen-Level-Baselines können Sie nicht sagen, ob ein Traffic-Dip eine defekte Blog-Vorlage oder eine standortweite Strafe ist.
Exportieren Sie alles in versionierte Dateien, nicht Screenshots: Screaming Frog-Crawles, Search Console-Performance-Exporte, GA4-Landingpage-Berichte und eine Backlink-Liste mit Kontakthistorie für die wichtigen Links. Speichern Sie sie dort, wo das gesamte Team sie erreichen kann, denn der Entwickler, der eine Redirect-Lücke in Woche neun debuggt, braucht den Wochen-Null-Crawl, nicht jemandes Erinnerung daran. Dieses Audit dauert drei bis fünf Tage und zahlt sich aus, wenn jemand zum ersten Mal fragt: "War diese Seite immer so?" - Mit Daten dauert die Antwort Minuten; Ohne sie dauert das Argument Wochen.
Ist Next.js das Richtige für Ihren SaaS?
Next.js funktioniert am besten, wenn Sie brauchen:
- Schnelle Landing Pages (Blog, Marketingseite)
- Benutzer-Dashboards mit dynamischen Daten
- API Routen für serverlose Funktionen
- Hohe SEO Leistung
Aber es ist übertrieben, wenn Sie nur einen einfachen Blog ohne Benutzerkonten haben. In diesem Fall behalten Sie WordPress.
Für das Wachstum von SaaS ist die Migration von WordPress zu Next.js ein strategischer Schritt. Ich habe gesehen, dass es die Conversion-Raten verdreifacht und die Hosting-Kosten halbiert hat. Beginnen Sie mit dem Audit. Dann wenden Sie sich an uns.
Brauchen Sie Hilfe?DG10 Agency ist spezialisiert auf WordPress-zu-Next.js-Migrationen. Wir übernehmen den Import von Inhalten, benutzerdefinierte Seiten, Umleitungen und die Bereitstellung. Buchen Sie eine kostenlose Beratung über unsereWeb- und mobile EntwicklungSeite.
