Headless WordPress + Next.js: der Schlachtplan für 2026

Was headless bedeutet

In einem Headless-Setup bleibt WordPress der Ort, an dem Redakteure Inhalte schreiben und verwalten, rendert aber nicht mehr die öffentliche Website. Ein separates Frontend – hier Next.js – holt die Inhalte über die WordPress-REST-API oder WPGraphQL und baut die Seiten.

Die Vorteile sind Geschwindigkeit, Sicherheit (das WordPress-Backend kann unter einer privaten Adresse liegen), Freiheit im Design und die Möglichkeit, dieselben Inhalte an Website, Apps und andere Kanäle zu liefern. Die Kosten sind zwei Systeme für Hosting und Wartung, und Funktionen, die sonst Themes und Plugins liefern, müssen im Frontend neu gebaut werden.

Wann es sich lohnt

• Große Content-Websites und Verlage, bei denen Tempo und Skalierung zählen.
• Marken, die ein stark individuelles, app-ähnliches Frontend brauchen.
• Inhalte, die auf Website, mobilen Apps und weiteren Kanälen genutzt werden.
• Teams, die bereits React- oder Next.js-Entwickler haben.

Für eine einfache Unternehmensseite oder ein kleines Geschäft mit wenigen Seiten ist ein gut gebautes klassisches WordPress-Theme meist günstiger und genauso schnell.

Rendering: statische Seiten, die aktuell bleiben

Generiere Seiten statisch und liefere sie über ein CDN aus, damit Besucher das HTML sofort erhalten. Statt die ganze Website neu zu bauen, nutze On-Demand-Revalidierung: Wenn ein Redakteur einen Beitrag veröffentlicht oder aktualisiert, ruft ein kleiner WordPress-Hook einen geheimen Endpunkt in Next.js auf, der nur die betroffenen Seiten oder Tags neu validiert. Inhalte sind in Sekunden live, und die Seiten bleiben schnell.

// app/api/revalidate/route.js — called by WordPress on publish
import { revalidateTag } from 'next/cache';

export async function POST(request) {
  const { secret, tag } = await request.json();
  if (secret !== process.env.REVALIDATE_SECRET) {
    return Response.json({ ok: false }, { status: 401 });
  }
  revalidateTag(tag);
  return Response.json({ ok: true });
}

Vorschau für Redakteure

Redakteure erwarten, dass der Vorschau-Button funktioniert. Nutze den Draft Mode von Next.js: WordPress verlinkt auf eine Vorschau-Route mit einem Secret und der Beitrags-ID, die Route aktiviert den Draft Mode, und die Seite holt die neueste Revision per authentifizierter Anfrage (zum Beispiel mit einem Anwendungspasswort oder Token). Teste die Vorschau für unveröffentlichte und geplante Beiträge sowie Seiten mit benutzerdefinierten Feldern.

SEO in einem Headless-Projekt

• Stelle die Felder des SEO-Plugins (Titel, Beschreibung, Canonical, Social-Bild, Schema) über die API bereit und gib sie in den Next.js-Metadaten aus.
• Erzeuge Sitemap und robots.txt im Frontend auf Basis der WordPress-Inhalte.
• Verwalte Weiterleitungen in WordPress und synchronisiere sie ins Frontend, damit die Redaktion die Kontrolle behält.
• Behalte bei einer Migration die URLs bei oder leite jede alte URL weiter.

Bilder, Formulare und Suche

Liefere WordPress-Medien über die Bildoptimierung von Next.js oder ein Bild-CDN aus und erlaube die WordPress-Mediendomain in der Konfiguration. Formulare brauchen ein Ziel: Sende sie an eine Next.js-Route, die validiert und an CRM oder E-Mail weiterleitet, oder nutze die API eines Formular-Plugins. Die Seitensuche wandert meist zu einem eigenen Dienst oder einem einfachen API-Endpunkt, weil die Suchseite des Themes nicht mehr existiert.

Stolperfallen, die wir einplanen

• Page Builder speichern Layouts als Shortcodes oder proprietäres Markup, das sich anderswo schwer darstellen lässt; besser Gutenberg-Blöcke oder benutzerdefinierte Felder.
• Menüs, Widgets und Plugin-Funktionen, die vom Theme abhängen, brauchen Gegenstücke in der API.
• Sichere das WordPress-Backend ab und deaktiviere das öffentliche Theme, um doppelte Inhalte zu vermeiden.
• Mehrsprachige Inhalte brauchen ein Plugin mit API-Unterstützung und eine klare URL-Strategie in Next.js.

Eine Checkliste vor dem Start

Klärt das Inhaltsmodell (Beitragstypen, Felder, Blöcke), wie Vorschau und Veröffentlichung funktionieren, wo Weiterleitungen und SEO-Felder liegen, wie Formulare und Suche gelöst werden und wer welche Hälfte hostet und überwacht. Mit diesen Entscheidungen im Voraus gibt Headless WordPress der Redaktion das Werkzeug, das sie kennt, und den Besuchern eine Website, die überall schnell ist.