Von WordPress zu Next.js: Headless-Aufbau oder Neubau, und was beim Umzug passiert

Von WordPress zu Next.js führen zwei Wege. Beim ersten bleibt WordPress das Redaktionssystem und gibt die Inhalte über seine Schnittstelle an eine Website weiter, die mit Next.js gebaut ist [1]; diesen Aufbau nennt man Headless. Beim zweiten entsteht die Website mit Next.js neu, und WordPress wird abgeschaltet. Ändern sich dabei Adressen, sollten die alten dauerhaft auf die neuen weiterleiten, damit Besucher und Google die Seiten wiederfinden [2] [3].

WordPress bringt eine Schnittstelle mit, die REST-API. Über sie lesen andere Anwendungen Beiträge, Seiten, Kategorien und weitere Inhalte als JSON-Daten aus. WordPress beschreibt selbst, dass sich damit ein ganz neues Frontend bauen oder Inhalte in getrennte Anwendungen bringen lassen [1]. Eine Next.js-Website holt die Inhalte dort ab und stellt sie dar. Ihr Team pflegt Texte und Bilder weiter in WordPress.

In WordPress bestimmt das Theme, wie die gespeicherten Inhalte im Browser aussehen [4], und Plugins ergänzen Funktionen [5]. Beim Headless-Aufbau übernimmt die Next.js-Website die Darstellung. Was das Theme bisher an Gestaltung auf die Seiten gebracht hat, plant sie deshalb selbst ein.

Dafür betreiben Sie zwei Systeme. WordPress braucht weiter einen Server mit PHP und einer MySQL- oder MariaDB-Datenbank [6]. WordPress und seine Plugins brauchen weiter Updates, denn ältere Versionen von WordPress erhalten keine Sicherheitsupdates [7]. Dazu kommt die Next.js-Website, die als Node.js-Server, als Docker-Container oder als statischer Export läuft [8]. Das offizielle Next.js-Beispiel für WordPress als Datenquelle setzt außerdem mehrere WordPress-Plugins voraus, darunter WPGraphQL, Yoast SEO und Redirection [9].

Sinnvoll ist dieser Weg, wenn Ihr Team in der gewohnten WordPress-Oberfläche weiterarbeiten soll, die öffentliche Website aber unabhängig vom Theme entstehen soll. Wie sich ein Headless-CMS allgemein von WordPress unterscheidet, zeigt der Beitrag „Headless CMS vs. WordPress“. Coday geht diesen Weg nicht: Coday baut Websites ohne WordPress.

Beim Neubau wird die Website mit Next.js programmiert, und WordPress wird nach dem Umzug abgeschaltet. Next.js ist ein React-Framework: Die Oberfläche entsteht aus React-Komponenten im Code [10]. Gestaltung, Formulare und andere Funktionen entstehen dort neu, ohne Theme und Plugins von WordPress. Seiten kann Next.js schon beim Bau der Website vorab erzeugen; das Ergebnis ist HTML, das sich zwischenspeichern und über ein CDN ausliefern lässt [11].

Wo die Texte liegen, entscheiden Sie. Stehen sie direkt im Code, ändert sie, wer den Code pflegt. Sollen Sie Inhalte selbst bearbeiten, kommt ein Headless-CMS dazu. Coday richtet dafür Sanity ein; Redakteure arbeiten dort im Sanity Studio, einer quelloffenen Redaktionsoberfläche [12].

Ein Server mit PHP und Datenbank für WordPress entfällt. Updates braucht auch eine Next.js-Website; Next.js bringt dafür einen eigenen Befehl mit [13].

Diesen Weg geht Coday. Inhaber Umutcan Emre Tezgel programmiert die neue Website selbst mit Next.js, React und Tailwind CSS, den Werkzeugen, mit denen auch codayweb.de gebaut ist.

WordPress und Next.js sind verschiedene Arten von Werkzeug. WordPress ist ein fertiges Redaktionssystem, das sich mit Themes gestalten und mit Plugins erweitern lässt [4] [5]. Next.js ist ein Framework, mit dem eine Website im Code entsteht [10]. Die Gegenüberstellung zeigt die Unterschiede, die für einen Betrieb zählen.

WordPress passt, wenn Sie Inhalte selbst im Block-Editor pflegen möchten, ein fertiges Theme für die Gestaltung reicht, die nötigen Funktionen als Plugin vorhanden sind und jemand die Updates zuverlässig einspielt [14] [4] [5] [7].

Next.js passt, wenn die Website Funktionen braucht, die für Ihren Betrieb programmiert werden, wenn Gestaltung und Aufbau nicht an ein Theme gebunden sein sollen und wenn jemand den Code betreut [10] [13]. Wer Texte selbst ändern will, braucht dazu ein Headless-CMS.

Bei Google haben beide Systeme denselben Ausgangspunkt: Beide können fertiges HTML ausliefern. WordPress erzeugt die Seiten auf dem Server aus den Vorlagen des Themes [15], Next.js kann sie vorab erzeugen [11]. Google nennt serverseitiges Rendern und Vorab-Rendern ausdrücklich eine gute Idee, weil es eine Website für Nutzer und Crawler schneller macht und nicht jeder Bot JavaScript ausführen kann [16]. Außerdem empfiehlt Google gute Core Web Vitals. Sie messen, wie echte Nutzer das Laden, die Reaktion auf Eingaben und die Stabilität einer Seite erleben [17].

Ob WordPress für Ihre Website noch zeitgemäß ist, beantwortet der Beitrag „Ist WordPress tot oder noch zeitgemäß?“.

Ändern sich die Adressen einer Website, behandelt Google das als Umzug und beschreibt die Schritte dafür in einer eigenen Anleitung [2]. Darin rät Google, nicht alles auf einmal zu ändern: Wer Domain, Redaktionssystem und Gestaltung wechseln will, soll das nacheinander tun [2]. Beim Umzug zu Next.js ändert sich ohnehin die Website selbst, beim Neubau auch das Redaktionssystem. Die Domain bleibt deshalb am besten dieselbe.

WordPress kann seine Inhalte als Datei exportieren. Die Exportfunktion erzeugt eine XML-Datei im Format WXR mit Beiträgen, Seiten, eigenen Inhaltstypen, Kommentaren, eigenen Feldern, Kategorien, Schlagwörtern und Benutzern [18]. Beim Headless-Aufbau liest die neue Website die Inhalte direkt aus WordPress, etwa über die REST-API [1].

Die Gestaltung zieht beim Export nicht mit: Sie steckt im Theme [4], und das Theme gehört nicht zu den Daten, die der Export nennt [18]. Bilder sind eigene Dateien mit eigenen Adressen. Google rät, sie wie alle anderen Inhalte in den Umzugsplan aufzunehmen [2].

Welche Adressen eine WordPress-Website hat, hängt von der Permalink-Einstellung ab, etwa /?p=123 in der einfachen Form oder /beispiel-beitrag mit dem Namen des Beitrags [19]. Lässt sich eine Adresse auf der neuen Website nicht genauso anlegen, braucht sie eine Weiterleitung. Google empfiehlt dafür eine Liste, die jeder alten Adresse ihre neue zuordnet, und dauerhafte Weiterleitungen auf dem Server, etwa mit den Statuscodes 301 oder 308 [2]. Beide bedeuten, dass eine Seite dauerhaft umgezogen ist [3]. In Next.js stehen Weiterleitungen in der Konfiguration; mit der Einstellung permanent antwortet der Server mit 308 [20].

Eine Weiterleitung soll direkt auf das endgültige Ziel zeigen, nicht über eine Kette. Viele alte Adressen auf eine einzige, unpassende Seite wie die Startseite umzuleiten, kann Google als Soft-404-Fehler behandeln. Inhalte, die nicht umziehen, antworten auf der neuen Website mit dem Statuscode 404 oder 410. Die Weiterleitungen bleiben so lange wie möglich bestehen, in der Regel mindestens ein Jahr [2].

Nach dem Umzug zeigen die internen Links auf die neuen Adressen, jede neue Seite verweist mit rel="canonical" auf sich selbst, und eine neue Sitemap nennt die neuen Adressen [2]. Hat die Testumgebung noindex-Regeln getragen, damit sie nicht in die Suche gelangt, kommen diese auf der neuen Website weg [2]. Titel und Beschreibung jeder Seite legt in Next.js der Code fest, etwa über die Metadata-Schnittstelle [21]. Was bisher in WordPress stand, etwa in einem SEO-Plugin wie Yoast SEO [9], wird dorthin übertragen.

Rechnen Sie mit Schwankungen. Laut Google kann sich die Position in den Suchergebnissen während eines Umzugs vorübergehend verändern, und bei mittelgroßen Websites kann es einige Wochen oder länger dauern, bis Google die neuen Adressen statt der alten zeigt [2]. Einen Platz bei Google kann dabei niemand garantieren [22].

Selbst umziehen können Sie, wenn jemand im Betrieb die neue Website in Next.js programmiert, die Inhalte überträgt, die Liste der alten Adressen anlegt und die Weiterleitungen einrichtet und testet. Fehlt dafür die Zeit oder das Wissen, lohnt sich Hilfe.

Coday baut Websites ohne WordPress neu, mit Next.js. Texte und Bilder aus dem alten System lassen sich übernehmen, und alte Adressen können auf die passenden neuen Seiten weiterleiten; was übernommen wird und welche Adressen weiterleiten, legt das Angebot fest. Während die neue Website entsteht, bleibt die alte online, und die Zwischenstände sehen Sie über einen Staging-Link. Ihre Domain bleibt dieselbe; zum Livegang zeigt sie auf die neue Website.

Im kostenlosen Erstgespräch sprechen Sie mit Inhaber Umutcan Emre Tezgel, per Telefon oder online, über Ihre Website: welche Seiten, Inhalte und Adressen es gibt und was davon umziehen soll. Danach erhalten Sie ein Angebot mit verbindlichem Festpreis. Eine pauschale Dauer nennt Coday nicht; den Zeitplan besprechen Sie vor dem Start. Den Quellcode der neuen Website erhalten Sie bei Projektabschluss.

Kann man WordPress mit Next.js als Headless-CMS nutzen?

Ja. WordPress gibt Beiträge, Seiten und andere Inhalte über seine REST-API als JSON-Daten aus, und eine Next.js-Website kann sie dort abholen und darstellen. Das offizielle Next.js-Beispiel nutzt WordPress ebenfalls als Datenquelle, dort über das Plugin WPGraphQL. WordPress läuft dabei weiter und braucht weiter Updates.

Ist Next.js besser als WordPress?

Nicht pauschal. WordPress ist ein fertiges Redaktionssystem, das sich mit Themes gestalten und mit Plugins erweitern lässt. Next.js ist ein Framework, mit dem die Website im Code entsteht. Was besser passt, hängt davon ab, wer die Inhalte pflegt, welche Funktionen die Website braucht und wer Updates und Code betreut.

Was passiert beim Umzug von WordPress zu Next.js mit meinem Google-Ranking?

Ändern sich Adressen, sollen die alten nach der Empfehlung von Google dauerhaft mit dem Statuscode 301 oder 308 auf die neuen weiterleiten. Laut Google kann die Position in den Suchergebnissen während eines Umzugs vorübergehend schwanken, und bei mittelgroßen Websites kann es einige Wochen oder länger dauern, bis Google die neuen Adressen zeigt. Einen Platz bei Google kann niemand garantieren.

Kann ich meine Inhalte aus WordPress übernehmen?

Ja. WordPress exportiert Beiträge, Seiten, Kommentare, Kategorien, Schlagwörter und weitere Daten als XML-Datei, und über die REST-API lassen sich die Inhalte auch direkt auslesen. Die Gestaltung zieht nicht mit, denn sie steckt im Theme. Bilder sind eigene Dateien, deren Adressen in den Umzugsplan gehören.

Brauche ich nach dem Umzug noch WordPress-Updates?

Beim Headless-Aufbau ja: WordPress läuft weiter, ältere Versionen erhalten keine Sicherheitsupdates, und auch Plugins brauchen Updates. Beim Neubau ohne WordPress entfallen sie. Eine Next.js-Website braucht eigene Updates; Next.js bringt dafür einen Befehl mit.

Die Zahlen in eckigen Klammern im Text verweisen auf diese Quellen.

• [1] WordPress Developer Resources, REST API Handbook (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [2] Google Search Central, Move a site with URL changes (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [3] Google Search Central, Redirects and Google Search (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [4] WordPress Theme Handbook, What Is a Theme? (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [5] WordPress.org Documentation, Manage Plugins (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [6] WordPress.org, Requirements (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [7] WordPress Developer Resources, Hardening WordPress (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [8] Next.js Docs, Deploying (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [9] Next.js, Beispiel cms-wordpress, README (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [10] Next.js Docs, Introduction (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [11] Next.js Docs, Glossary (Prerendering) (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [12] Sanity Docs, Sanity Studio (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [13] Next.js Docs, Upgrading (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [14] WordPress.org Documentation, WordPress Block Editor (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [15] WordPress Theme Handbook, Template Hierarchy (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [16] Google Search Central, JavaScript SEO basics (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [17] Google Search Central, Understanding Core Web Vitals and Google search results (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [18] WordPress.org Documentation, Tools Export screen (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [19] WordPress.org Documentation, Settings Permalinks screen (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [20] Next.js Docs, redirects (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [21] Next.js Docs, Metadata and OG images (öffnet in neuem Tab) (abgerufen am 21.10.2026)
• [22] Google Search Central, Do you need an SEO? (öffnet in neuem Tab) (abgerufen am 21.10.2026)