Wie kann man WordPress mit Next.js für eine Headless-Website nutzen?

Moderne Websites erfordern Geschwindigkeit, Flexibilität und eine optimale Suchmaschinenoptimierung. Ein Headless-WordPress mit Next.js bietet all das. Durch die Trennung von Content-Management-System und Frontend profitieren Sie von den Vorteilen beider Welten: der vertrauten WordPress-Oberfläche und den blitzschnellen Rendering-Funktionen von Next.js.

Dieser Leitfaden führt Sie durch alle Schritte, vom Verständnis der Architektur bis hin zur Bereitstellung einer produktionsreifen Headless-Website.

Egal ob Sie ein Entwickler sind, der sich mit entkoppelten CMS-Setups beschäftigt, oder ein Team, das eine ältere WordPress-Website modernisieren möchte – diese Schritt-für-Schritt-Anleitung bietet Ihnen alles, was Sie brauchen.

Kurz gesagt: Erstellen Sie eine schnelle und skalierbare Headless-Website

• Um eine bessere Flexibilität zu erzielen, empfiehlt sich die Verwendung eines entkoppelten Systems, um die Inhaltsverwaltung vom Frontend zu trennen.
• Inhalte werden über REST-API oder GraphQL abgerufen, um eine effiziente Datenbereitstellung zu gewährleisten.
• Leistungsverbesserung durch statische Generierung, serverseitiges Rendering und intelligentes Caching.
• Bereitstellung auf modernen Hosting-Plattformen und sicheren APIs für Geschwindigkeit , Skalierbarkeit und Schutz.

Was ist Headless WordPress und warum sollte man es mit Next.js kombinieren?

Um die Leistungsfähigkeit dieses Stacks zu verstehen, muss man zunächst das Konzept einer „headless“ Architektur verstehen und warum diese beiden spezifischen Technologien ein so perfektes Paar bilden.

Definition der Headless-WordPress-CMS-Architektur

Das traditionelle WordPress ist ein monolithisches System. Es verwaltet die Inhaltsspeicherung, die Geschäftslogik und das Seitenrendering an einem zentralen Ort. Wenn ein Besucher Ihre Website aufruft, fragt WordPress die Datenbank ab, verarbeitet PHP-Vorlagen und liefert eine vollständig gerenderte HTML-Seite aus.

Headless WordPress bricht mit diesem Modell. In einer Headless-Architektur:

• WordPress fungiert lediglich als Backend. Es verwaltet Inhalte, Benutzerauthentifizierung und Datenspeicherung.

• Das Frontend ist komplett separat. Ein JavaScript-Framework wie Next.js übernimmt das gesamte Rendering und die Benutzerinteraktion.

• Eine API stellt die Brücke zwischen den beiden. WordPress stellt Inhalte über seine REST-API oder seinen GraphQL-Endpunkt bereit, und Next.js ruft diese Daten ab, um Seiten zu erstellen.

Der Begriff „headless“ leitet sich von der Entfernung des „Heads“, der Frontend-Präsentationsschicht, aus WordPress ab.

Ihre WordPress-Installation existiert weiterhin, Redakteure melden sich nach wie vor unter /wp-admin und Beiträge werden weiterhin auf dieselbe Weise erstellt. Besucher interagieren jedoch nie direkt mit WordPress, sondern mit Ihrem Next.js-Frontend.

Vorteile der Entkopplung von Backend und Frontend

Die Entkopplung Ihres WordPress-Backends von Ihrer Frontend-Architektur bietet mehrere große Vorteile:

• Leistungssteigerung : Next.js rendert Seiten bereits zur Build-Zeit als statisches HTML vor. Dadurch entfällt die PHP-Verarbeitung bei jeder Anfrage, was die Time to First Byte (TTFB) drastisch reduziert.

• Frontend-Freiheit : Sie können Ihr Frontend komplett neu gestalten, ohne WordPress zu verändern. Tauschen Sie Frameworks aus, passen Sie Layouts an oder führen Sie A/B-Tests durch – ganz ohne CMS-Migrationen.

• Verbesserte Sicherheit Datei wp-login.php nicht angreifen , wenn sie diese nicht finden.

• Skalierbarkeit : Statische Seiten, die von einem CDN , bewältigen Trafficspitzen mühelos. Ihr WordPress-Server empfängt nur API-Anfragen, keine Seitenaufrufe.

• Multi-Channel-Inhaltsbereitstellung : Dieselbe WordPress Content-API kann gleichzeitig eine Website, eine mobile App, einen Sprachassistenten und einen Kiosk bedienen.

• Bessere Entwicklererfahrung : Frontend-Teams arbeiten mit React- und JavaScript-Tools, die sie bereits kennen, ohne PHP oder die Entwicklung von WordPress-Themes erlernen zu müssen.

Warum Next.js ideal für Headless WordPress-Performance und SEO ist?

Next.js hebt sich aus mehreren Gründen von anderen JavaScript-Frameworks für Headless-CMS-Projekte ab.

• Serverseitiges Rendering (SSR) und statische Seitengenerierung (SSG) geben Ihnen die Kontrolle darüber, wann und wie Seiten gerendert werden. Sie können Ihren Blog statisch zur Build-Zeit generieren, häufig wechselnde Produktseiten serverseitig rendern oder beide Strategien auf Ihrer Website kombinieren.

• Die integrierte Bildoptimierung über die next/image- Komponente liefert automatisch korrekt dimensionierte, WebP-formatierte Bilder per Lazy Loading aus. Dies verbessert direkt die Core Web Vitals-Werte.

• Dateibasiertes Routing vereinfacht dynamische Routen. Durch das Erstellen einer [slug].js- Datei im Seitenverzeichnis werden automatisch alle Blogbeitrags-URLs verarbeitet.

• Mit API-Routen können Sie serverseitige Logik, wie Formularverarbeitung oder Webhook-Handling, direkt in Ihr Next.js-Projekt einbinden, ohne ein separates Backend zu benötigen.

• SEO-Funktionen sind nativ integriert. Next.js rendert das vollständige HTML serverseitig, sodass Suchmaschinen-Crawler den kompletten Seiteninhalt erhalten, ohne auf die Ausführung von JavaScript warten zu müssen. In Kombination mit der next/head` sorgt dies für eine wettbewerbsfähige SEO-Performance Ihrer Website.

REST-API vs. GraphQL beim Abrufen von WordPress-Inhalten

WordPress bietet zwei API-Ansätze für Headless-Setups:

Die WordPress REST API ist im WordPress-Kern enthalten. Es werden keine zusätzlichen Plugins benötigt. Sie stellt die Endpunkte `/wp-json/wp/v2/posts` für Beiträge und `/wp-json/wp/v2/pages` für Seiten bereit. Die Verwendung von `fetch()` und eignet sich gut für einfache Inhaltsanforderungen.

WPGraphQL ist ein Plugin, das WordPress um einen GraphQL-Endpunkt erweitert. Anstatt ein großes JSON- Objekt mit Dutzenden unnötiger Felder zu erhalten, schreiben Sie eine Abfrage, die nur die exakt benötigten Felder für Ihr Frontend anfordert.

Dadurch wird die Nutzlastgröße reduziert, das Abrufen verschachtelter Daten vereinfacht (z. B. Beiträge mit ihren Kategorien und Autorendetails in einer einzigen Anfrage) und Ihrem Frontend-Team wird ein stark typisiertes Schema zur Verfügung gestellt.

Für kleinere Projekte oder Teams, die neu in der GraphQL-Welt sind, ist die REST-API völlig ausreichend. Bei größeren Websites mit komplexen Inhaltsbeziehungen bietet WPGraphQL in der Regel eine bessere Performance und eine übersichtlichere Entwicklererfahrung .

Voraussetzungen für die Erstellung eines WordPress- und Next.js-Headless-Setups

Bevor Sie mit dem Programmieren beginnen, müssen Sie eine solide Grundlage schaffen und Ihre Umgebung vorbereiten.

Erforderliche Tools und Umgebungseinrichtung

Um eine Headless-WordPress-Installation durchzuführen, benötigen Sie die folgenden Tools auf Ihrem Rechner:

• Node.js (Version 18 oder höher): Laden Sie es von nodejs.org herunter. Führen Sie den Befehl `node -v` , um die Installation zu bestätigen.

• npm oder Yarn: npm ist in Node.js enthalten. Yarn ist optional, wird aber von einigen Teams bevorzugt.

• Eine laufende WordPress-Installation: lokal (mit LocalWP, MAMP oder Docker ) oder als gehostete Instanz. Die einzige Voraussetzung ist, dass sie über HTTP erreichbar ist.

• Ein Code-Editor: VS Code mit den Erweiterungen ESLint und Prettier bietet Ihnen das beste Next.js-Entwicklungserlebnis.

• Git : Für Versionskontrolle und Bereitstellungsworkflows.

Für die lokale WordPress-Entwicklung ist LocalWP der schnellste Weg, um ohne jegliche Konfiguration eine WordPress-Website auf Ihrem Rechner zu erstellen.

Installation der erforderlichen WordPress-Plugins (WPGraphQL, REST-API)

Die WordPress REST API ist in allen modernen WordPress-Installationen standardmäßig aktiviert. Sie können die Funktion überprüfen, indem Sie https://yoursite.com/wp-json/wp/v2/posts in Ihrem Browser aufrufen.

Für WPGraphQL:

• Melden Sie sich in Ihrem WordPress-Dashboard an.

• Navigieren Sie zu Plugins → Neu hinzufügen .

• Suchen Sie nach WPGraphQL und installieren Sie das Plugin von Jason Bahl.

• Aktivieren Sie es.

• In Ihrem Dashboard erscheint ein neuer Menüpunkt namens GraphQL. Gehen Sie zu GraphQL → Einstellungen , um den Endpunkt zu konfigurieren.

Sie können WPGraphQL für ACF auch installieren, wenn Sie Advanced Custom Fields , wodurch benutzerdefinierte Felddaten über Ihr GraphQL-Schema zugänglich gemacht werden.

Um Ihren GraphQL-Endpunkt zu testen, navigieren Sie in Ihrem Dashboard zu GraphQL → GraphiQL IDE. Diese interaktive Umgebung ermöglicht es Ihnen, Abfragen zu schreiben und zu testen, bevor Sie sie in Ihrem Next.js-Projekt verwenden.

WordPress-API-Konfiguration für Headless-Auslieferung

Mehrere WordPress-Einstellungen beeinflussen die Bereitstellung der Headless-API:

• Permalinks : Gehen Sie zu Einstellungen → Permalinks und wählen Sie eine andere Option als „Einfach“. Die REST-API funktioniert nicht korrekt mit einfachen Permalinks. „Beitragsname“ ( /%postname%/ ) ist die gängigste Wahl.

• CORS-Header: Standardmäßig blockieren die Antworten der WordPress REST API möglicherweise ursprungsübergreifende Anfragen von Ihrem Next.js-Entwicklungsserver. Fügen Sie CORS-Header zur functions.php oder verwenden Sie ein Plugin wie WP CORS, um Anfragen von Ihrer Next.js-Domain zuzulassen.

• Anwendungspasswörter: Für private Inhalte oder Entwürfe unterstützt WordPress Anwendungspasswörter (eingeführt in WordPress 5.6). Generieren Sie ein solches Passwort in Ihrem Benutzerprofil und fügen Sie es Ihren API-Anfragen als Basic-Auth-Header hinzu.

• Öffentliche Sichtbarkeit von Inhalten: Stellen Sie sicher, dass die Beiträge, die Sie anzeigen möchten, veröffentlicht und nicht passwortgeschützt oder privat sind.

Grundlagen von React und Next.js verstehen, bevor Sie beginnen

Die Headless-WordPress-Entwicklung mit Next.js setzt Kenntnisse in folgenden Bereichen voraus:

• Grundlagen von React: Komponenten, Props, State sowie die Hooks useEffect und useState

• Next.js-Seitenrenderingmethoden: Es ist unerlässlich, den Unterschied zwischen getStaticProps , getServerSideProps und getStaticPaths

• Asynchrones JavaScript: Sie schreiben asynchronen Datenabrufcode unter Verwendung von async/await der Fetch API.

• JSX-Syntax: Wie man HTML-ähnliche Syntax in JavaScript schreibt.

Wenn Sie Next.js noch nicht kennen, lohnt es sich, vor Beginn dieses Projekts ein paar Stunden mit dem offiziellen Next.js-Tutorial unter nextjs.org/learn zu verbringen.

Schritt-für-Schritt-Anleitung zur Verbindung von WordPress und Next.js

Nachdem die Grundlage geschaffen ist, verbinden wir nun das Backend mit dem Frontend . Diese Anleitung verwendet das Next.js Pages Router-Paradigma, das für statische Blog-Architekturen weit verbreitet ist.

Schritt 1: Erstellen und Konfigurieren eines neuen Next.js-Projekts

Öffnen Sie Ihr Terminal und erstellen Sie eine neue Next.js-Anwendung mit dem Dienstprogramm create-next-app.

npx create-next-app@latest my-headless-site cd my-headless-site

Der Einrichtungsassistent fragt, ob Sie TypeScript, ESLint, Tailwind CSS und den App Router verwenden möchten. Wählen Sie für diese Anleitung den Pages Router, um maximale Kompatibilität mit bestehenden Tutorials und Plugins zu gewährleisten. TypeScript wird für größere Projekte empfohlen.

Erstellen Sie als Nächstes eine .env.local- Datei im Stammverzeichnis Ihres Projekts, um Ihre WordPress-URL zu speichern:

NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json/wp/v2 WORDPRESS_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql

Diese Datei darf niemals in die Versionskontrolle eingecheckt werden. Fügen Sie .env.local zu Ihrer .gitignore-Datei .

Schritt 2: WordPress-Daten mit der REST-API und getStaticProps abrufen

Erstellen Sie eine Datei unter pages/blog/index.js . Diese Seite listet alle Blogbeiträge auf, die von der WordPress REST API abgerufen werden:

export default function BlogIndex({ posts }) { return (<ul> {posts.map((post) => (<li key={post.id}> <a href={`/blog/${post.slug}`}>{post.title.rendered}</a></li> ))}</ul> ); } export async function getStaticProps() { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?_embed&per_page=100` ); const posts = await res.json(); return { props: { posts }, revalidate: 60, }; }

Die Funktion `getStaticProps` wird beim Kompilieren auf dem Server ausgeführt. Sie ruft Beiträge von WordPress ab und übergibt sie als Props an Ihre Komponente. Die Option `revalidate : 60` aktiviert die inkrementelle statische Regeneration, die im Abschnitt „Erweitert“ beschrieben wird.

Schritt 3: WPGraphQL mit Apollo oder GraphQL-Client verwenden

Für einen besser skalierbaren Ansatz empfiehlt sich die Verwendung von WPGraphQL. Installieren Sie zunächst einen schlanken GraphQL-Client in Ihrem Next.js-Projekt.

npm install @apollo/client graphql

Erstellen Sie eine Hilfsdatei unter lib/apolloClient.js :

import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT, cache: new InMemoryCache(), }); export default client;

Anschließend können Sie WordPress-Beiträge mithilfe von GraphQL in getStaticProps :

import client from "../../lib/apolloClient"; import { gql } from "@apollo/client"; const GET_POSTS = gql` query GetPosts { posts { nodes { id title slug date excerpt featuredImage { node { sourceUrl altText } } } } } `; export async function getStaticProps() { const { data } = await client.query({ query: GET_POSTS }); return { props: { posts: data.posts.nodes }, revalidate: 60, }; }

Dieser Ansatz ruft nur die Felder ab, die Ihr Frontend verwendet, wodurch die API-Antworten schlank bleiben.

Schritt 4: Dynamische Routen und statische Generierung für Blogseiten

Um für jeden Blogbeitrag eine eigene Seite zu erstellen, müssen Sie dynamisches Routing verwenden. Erstellen Sie in Next.js eine Datei namens [slug].js im pages/posts/ .

getStaticPaths Sie Next.js mit, welche URLs erstellt werden sollen, und mit getStaticProps rufen Sie die spezifischen Inhalte für jede URL ab.

export async function getStaticPaths() { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?per_page=100` ); const posts = await res.json(); const paths = posts.map((post) => ({ params: { slug: post.slug }, })); return { paths, fallback: "blocking" }; } export async function getStaticProps({ params }) { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&_embed` ); const posts = await res.json(); if (!posts.length) { return { notFound: true }; } return { props: { post: posts[0] }, revalidate: 60, }; }

`getStaticPaths` teilt Next.js mit, welche Slugs vorgerendert werden sollen. Die Einstellung `fallback: "blocking"` bedeutet, dass alle Slugs, die nicht im initialen Build enthalten sind, beim ersten Request serverseitig gerendert und anschließend als statische Seite zwischengespeichert werden.

Schritt 5: Umgang mit Beitragsinhalten, Bildern und benutzerdefinierten Feldern

WordPress speichert den Inhalt des Beitrags als unformatiertes HTML. Mit Reacts ` dangerouslySetInnerHTML` :

<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />

Für Beitragsbilder verwenden Sie den Abfrageparameter _embed post._embedded['wp:featuredmedia'][0].source_url .

Verwenden Sie die Image- Komponente von Next.js für die automatische Optimierung:

import Image from "next/image"; <Image src={post._embedded["wp:featuredmedia"][0].source_url} alt={post.title.rendered} width={1200} height={630} />

Aktivieren Sie für Advanced Custom Fields das WPGraphQL-Plugin für ACF. Die Daten der benutzerdefinierten Felder erscheinen dann in Ihrem GraphQL-Schema und können zusammen mit den Standard-Postdaten abgefragt werden.

Fortgeschrittene Techniken für Headless WordPress und Next.js

Sobald die grundlegenden Funktionen funktionieren, können Sie erweiterte Funktionen implementieren, um Ihrer Website den Charakter einer professionellen Unternehmensanwendung zu verleihen.

Optimierung mit inkrementeller statischer Regeneration (ISR)

ISR ermöglicht es Ihnen, statisch generierte Seiten nach der Bereitstellung zu aktualisieren, ohne Ihre gesamte Website neu erstellen zu müssen. Die Konfiguration hängt vom verwendeten Next.js-Router ab, und die Verwechslung der beiden ist eine häufige Fehlerquelle.

Seiten-Router-ISR (zeitbasiert)

von getStaticProps einen für die erneute Validierung (in Sekunden) :

return { props: { post }, revalidate: 300, // Alle 5 Minuten neu generieren };

Besucht ein Nutzer eine Seite nach Ablauf des Revalidierungszeitraums, liefert Next.js die zwischengespeicherte Seite sofort aus und generiert sie gleichzeitig im Hintergrund neu. Der nächste Besucher erhält somit die aktuelle Version.

Seiten Router ISR (bei Bedarf)

Für eine bedarfsgesteuerte Revalidierung, die durch ein WordPress-Veröffentlichungs- oder Aktualisierungsereignis ausgelöst wird, erstellen Sie eine API-Route unter pages/api/revalidate.js . WordPress ruft diese Route über einen Webhook auf:

export default async function handler(req, res) { if (req.query.secret !== process.env.REVALIDATION_SECRET) { return res.status(401).json({ message: "Ungültiges Token" }); } const slug = req.query.slug; try { await res.revalidate(`/blog/${slug}`); return res.json({ revalidated: true }); } catch (err) { return res.status(500).send("Fehler bei der erneuten Validierung"); } }

res.revalidate() ist die korrekte Pages-Router-Methode. Sie löst eine sofortige Hintergrundregeneration für den betreffenden Pfad aus, ohne das Ablaufen des zeitbasierten Fensters abzuwarten.

App Router ISR

„app/“ verwenden , ist die Syntax anders. Die zeitbasierte Revalidierung wird als Konfigurationsexport für ein Routensegment festgelegt:

// app/blog/[slug]/page.js export const revalidate = 300;

Die bedarfsgesteuerte Revalidierung im App Router verwendet revalidatePath() oder revalidateTag() , importiert aus next/cache , innerhalb einer Serveraktion oder eines Routenhandlers, nicht innerhalb einer API-Route:

// app/api/revalidate/route.js (App Router Route Handler) import { revalidatePath } from "next/cache"; import { NextResponse } from "next/server"; export async function POST(request) { const { slug, secret } = await request.json(); if (secret !== process.env.REVALIDATION_SECRET) { return NextResponse.json({ message: "Ungültiges Token" }, { status: 401 }); } revalidatePath(`/blog/${slug}`); return NextResponse.json({ revalidated: true }); }

Wichtiger Unterschied: `res.revalidate()` gehört zum Seiten-Router. `revalidatePath()` und `revalidateTag()` gehören zum Anwendungs-Router. Die Verwendung von Methoden des Anwendungs-Routers in einem Projekt mit Seiten-Router oder umgekehrt führt zu unbemerkten Fehlern oder Laufzeitfehlern. Verwenden Sie die Methode des Routers, den Sie tatsächlich nutzen.

Dieser Leitfaden verwendet in seiner Schritt-für-Schritt-Anleitung durchgehend den Seiten-Router. Sollten Sie in Zukunft zum Anwendungs-Router migrieren, aktualisieren Sie bitte die gesamte ISR-Logik entsprechend, sodass ` revalidatePath()` in den Routen-Handlern verwendet wird.

Hinzufügen eines Vorschaumodus für Entwurfsinhalte

Der Vorschaumodus ermöglicht es Redakteuren, WordPress-Entwürfe vor der Veröffentlichung im Next.js-Frontend anzusehen. Richten Sie zwei API-Routen ein:

• /api/preview : Aktiviert den Vorschaumodus und leitet zum POST-Request weiter.
• /api/exit-preview : Deaktiviert den Vorschaumodus.

Konfigurieren Sie in Ihrem WordPress-Theme oder -Plugin die „Vorschau-URL“ (falls Sie die WPGraphQL JWT-Authentifizierung verwenden) so, dass sie auf https://your-nextjs-site.com/api/preview?secret=YOUR_SECRET&slug={slug} .

In getStaticProps prüfen Sie den Vorschaumodus und rufen Sie den Entwurfsinhalt ab:

export async function getStaticProps({ params, preview, previewData }) { const authHeader = preview ? { Authorization: `Bearer ${previewData.token}` } : {}; const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&status=draft`, { headers: authHeader } ); // ... }

Sitemaps und SEO-Metadaten in Next.js erstellen

Installieren Sie das nextsitemap zur automatischen Sitemap-Generierung:

npm install next-sitemap

Erstellen Sie eine next-sitemap.config.js- Datei und konfigurieren Sie diese so, dass alle WordPress-Beitrags-Slugs, die zur Build-Zeit abgerufen werden, enthalten sind. Führen Sie next-sitemap als Postbuild-Skript in Ihrer package.json .

Für SEO-Metadaten pro Seite verwenden Sie die next/head -Komponente oder, falls Sie den App Router verwenden, die integrierte Metadata API:

import Head from "next/head";<Head><title> {post.title.rendered} | Mein Blog </title><meta name="description" content="{post.excerpt.rendered}" /><meta property="og:title" content="{post.title.rendered}" /><meta property="og:image" content={featuredImageUrl} /></Head>

Nutzen Sie das RankMath-Plugin in WordPress und stellen Sie dessen Metadaten über WPGraphQL mit dem Add WPGraphQL SEO-Plugin bereit. Dadurch können Redakteure Titel und Beschreibungen direkt in WordPress verwalten, die dann von Next.js abgerufen und gerendert werden.

Weiterlesen: WordPress als Headless-CMS nutzen

Caching-Strategien und SWR für clientseitiges Abrufen

Nicht alle Inhalte müssen statisch generiert werden. Benutzerspezifische Daten, Kommentare oder Echtzeit-Bestandsinformationen profitieren vom clientseitigen Abruf. Verwenden Sie die swr -Bibliothek von Vercel:

npm install swr

import useSWR from "swr"; const fetcher = (url) => fetch(url).then((r) => r.json()); function Comments({ postId }) { const { data, error } = useSWR( `/wp-json/wp/v2/comments?post=${postId}`, fetcher ); if (error) return<p> Kommentare konnten nicht geladen werden.</p> ; falls (!Daten) zurückgeben<p> Laden...</p> ; zurückkehren<ul> {data.map((c) =><li key={c.id}> {c.content.rendered}</li> )}</ul> ; }

SWR übernimmt Caching, Revalidierung und Deduplizierung automatisch. Es verwendet eine Strategie, bei der veraltete Daten während der Revalidierung verwendet werden: Zwischengespeicherte Daten werden sofort zurückgegeben, während im Hintergrund automatisch neue Daten abgerufen werden.

Best Practices für Bereitstellung, Leistung und Sicherheit von WordPress mit Next.js

Stellen Sie Ihr Next.js-Frontend und Ihr WordPress-Backend als separate Dienste bereit. Diese Trennung ist einer der Hauptvorteile des Headless-Modells.

Next.js-Bereitstellungen funktionieren am besten auf Vercel, der vom Next.js-Team entwickelten Plattform. Vercel übernimmt ISR, Edge-Caching , Bildoptimierung und die Verwaltung von Umgebungsvariablen standardmäßig.

Netlify und AWS Amplify sind solide Alternativen. Für selbstgehostete Installationen führen Sie Next.js mit `npm run build && npm start` hinter einem Nginx-Reverse-Proxy aus.

WordPress kann auf jedem gängigen PHP-Hosting-Anbieter (z. B. WP Engine , Kinsta , SiteGround ) oder einem VPS installiert werden. Da WordPress nur API-Antworten verarbeitet (keine Seitenaufrufe), bewältigt selbst ein einfacher Hosting-Anbieter ein hohes Datenaufkommen.

Sicherheitsverbesserungen für Headless-WordPress:

• Verlegen Sie Ihre WordPress-Installation auf eine nicht-öffentliche Subdomain wie cms.yourdomain.com .
• XML-RPC deaktivieren ( add_filter('xmlrpc_enabled', '__return_false'); ).
• Verwenden Sie eine Web Application Firewall (WAF) wie beispielsweise Cloudflare.
• Die WordPress REST API soll für sensible Endpunkte auf authentifizierte Anfragen beschränkt werden.
• Halten Sie WordPress-Core, Themes und Plugins auf dem neuesten Stand.
• Verwenden Sie sichere Anwendungspasswörter für die API-Authentifizierung.

Checkliste zur Leistungsoptimierung

• Aktivieren Sie die CDN-Auslieferung für Ihre statischen Next.js-Assets.
• Verwenden Sie next/image für alle Bilder; dadurch werden responsive Größen generiert und WebP automatisch ausgeliefert.
• Minimieren Sie clientseitiges JavaScript, indem Sie Komponenten nach Möglichkeit serverseitig rendern.
• Setzen Sie die entsprechenden HTTP-Cache-Header in den WordPress-API-Antworten.
• Verwenden Sie einen WordPress-Objektcache (Redis oder Memcached ), um die Datenbankabfragen hinter Ihrer API zu beschleunigen.

Häufige Fehlerquellen bei WordPress mit Next.js Headless-Setup beheben

Der Umstieg auf ein Headless-System ist lohnend, erfordert aber etwas Einarbeitungszeit. Hier sind die häufigsten Probleme und wie man sie behebt:

• CORS-Fehler in der Entwicklungsumgebung: Ihr Browser blockiert ursprungsübergreifende Anfragen von localhost:3000 an Ihre WordPress-Domain. Fügen Sie CORS-Header in WordPress über die functions.php hinzu oder verwenden Sie das WP CORS-Plugin. Erlauben Sie Anfragen von verschiedenen Ursprüngen sowohl für Ihre Entwicklungs- als auch für Ihre Produktionsdomain von Next.js.

• Permalinks liefern den Fehler 404 zurück : Die REST-API benötigt nicht-plain Permalinks. Gehen Sie zu Einstellungen → Permalinks und speichern Sie eine beliebige Option für nicht-plain Permalinks, auch wenn Sie keine Änderungen vornehmen. Dadurch werden die Rewrite-Regeln aktualisiert.

• Bilder von WordPress werden von Next.js blockiert: Next.js beschränkt aus Sicherheitsgründen den Zugriff auf externe Bilddomains. Fügen Sie Ihre WordPress-Domain zu next.config.js :

module.exports = { images: { domains: ["your-wordpress-site.com"], }, };

• HTML-Entitäten im gerenderten Inhalt: Die WordPress REST API gibt Titel mit HTML-Entitäten wie & . Verwenden Sie ein kleines Hilfsprogramm, um diese zu dekodieren, oder installieren Sie das html-entities .

• Der Build schlägt aufgrund zu vieler API-Anfragen fehl: Bei Tausenden von Beiträgen kann das Abrufen aller Slugs mit `getStaticPaths` zu einem Timeout oder zum Erreichen der Ratenbegrenzung führen. Unterteilen Sie Ihre Anfragen mithilfe der Abfrageparameter ` page` und `per_page` in `fallback: "blocking"` und rendern Sie nur die neuesten Beiträge vor.

• GraphQL-Schemafehler nach Plugin-Updates: Das WPGraphQL-Schema ändert sich beim Hinzufügen oder Entfernen von Plugins. Generieren Sie nach WordPress-Plugin-Änderungen Ihren Apollo-Client-Cache neu oder löschen Sie Ihren lokalen Schema-Snapshot.

• Entwürfe in der Produktionsumgebung: Wenn Sie `status=any` , stellen Sie sicher, dass Produktionsabfragen ausschließlich `status=publish` . Verwenden Sie umgebungsspezifische API-Parameter, um zu verhindern, dass Entwürfe öffentlich angezeigt werden.

Abschluss

Die Verwendung von WordPress mit Next.js bietet Ihnen eine skalierbare, SEO-freundliche Headless-Architektur, die das traditionelle WordPress in nahezu jeder Hinsicht übertrifft.

Ihr Content-Team behält den gewohnten WordPress-Editor, während Ihr Entwicklungsteam mit modernen React-Tools arbeitet.

Das Setup basiert auf drei Komponenten: WordPress als Headless-CMS , der REST-API oder WPGraphQL als Datenschicht und Next.js, das für das Frontend-Rendering und die Leistungsoptimierung zuständig ist.

Beginnen Sie mit der REST-API, wechseln Sie bei zunehmender Komplexität zu WPGraphQL und integrieren Sie anschließend ISR, den Vorschaumodus und die bedarfsgesteuerte Revalidierung, sobald Ihre Website ausgereifter ist. Stellen Sie Ihr Next.js-Frontend auf Vercel und WordPress auf einem dedizierten PHP-Host bereit, um eine saubere, produktionsreife Trennung zu gewährleisten.

Diese Kombination ist nicht mehr experimentell. Sie treibt führende Publishing-Plattformen, E-Commerce-Websites und Unternehmensanwendungen an. Die Tools sind ausgereift, die Community aktiv und die Leistungssteigerungen sind real. Jetzt ist der richtige Zeitpunkt für die Entwicklung.

Häufig gestellte Fragen zu WordPress mit Next.js für eine Headless-Website