WordPress gibt es seit über 20 Jahren und betreibt laut W3Techs 42,7 % aller Websites im Internet. Außerdem hält es einen Marktanteil von 62,5 % bei den Content-Management-Systemen (CMS) hinter Websites.

Heute gibt es viele Programmiersprachen und Frameworks, mit denen du benutzerfreundliche und leistungsstarke Websites erstellen kannst, die viel schneller sind als WordPress, egal welche Optimierungen du in deinem WordPress-Dashboard vornimmst. Ein Beispiel ist Next.js, ein beliebtes React-Framework.

Dieser Leitfaden zeigt dir, wie du WordPress als Headless CMS nutzt und Daten für deine Next.js-Anwendung bereitstellst. Außerdem wird erklärt, wie du deinen Next.js-Code als statische Website auf dem kostenlosen Statische-Seiten-Hosting Dienst von Kinsta bereitstellst.

Verständnis von Headless WordPress

Headless WordPress bedeutet, dass WordPress nur für seine Backend-Funktionen – die Verwaltung und Speicherung von Inhalten – verwendet wird und ein separates System wie Next.js für die Frontend-Präsentation eingesetzt wird.

Diese Entkopplung ermöglicht es Entwicklern, die robusten Content-Management-Tools von WordPress zu nutzen und gleichzeitig die Vorteile moderner Frontend-Entwicklungsfunktionen wie serverseitiges Rendering und statische Website-Generierung in Next.js zu nutzen.

Vorbereiten deiner WordPress-Seite

Bevor du mit der Next.js-Entwicklung beginnst, musst du deine WordPress-Website ein wenig vorbereiten, damit sie als Headless CMS genutzt werden kann.

Wenn du noch keine WordPress-Website hast, kannst du mit Kinsta ganz einfach eine erstellen. Es gibt drei Methoden, um eine WordPress-Website mit Kinsta zu erstellen:

  1. Erstelle eine Website auf deinem lokalen Rechner (vielleicht mit unseren DevKinsta-Tools), bevor du sie auf unsere Server verschiebst
  2. Erstelle eine Website aus der Ferne über das MyKinsta-Dashboard
  3. Erstelle eine Website aus der Ferne über die Kinsta-API

Sobald du eine WordPress-Site hast, gibt es zwei Möglichkeiten, um Daten aus deinem WordPress-CMS in dein Frontend-Framework zu übertragen: WPGraphQL und REST API.

Die REST-API erleichtert das Abrufen von Daten im JSON-Format mit JavaScript-Ansätzen wie der Fetch-API oder der Axios-Bibliothek. Die REST-API ist seit Version 4.7 in WordPress integriert, d.h. sie benötigt kein Plugin, um zu funktionieren. Aber um WPGraphQL zu nutzen, mit dem du über GraphQL-Abfragen mit deinen WordPress-Daten interagieren kannst, musst du das WPGraphQL-Plugin installieren.

Für diesen Leitfaden verwenden wir die REST-API. Um deine WordPress-Daten im JSON-Format zu erhalten, hänge /wp-json/wp/v2 an die URL deiner WordPress-Website an:

http://yoursite.com/wp-json/wp/v2

Wenn die JSON-API nicht standardmäßig aktiviert ist, wenn du http://yoursite.com/wp-json besuchst, kannst du sie aktivieren, indem du im WordPress-Dashboard unter Einstellungen Permalinks öffnest und Post Name oder eine andere Option deiner Wahl außer Plain wählst:

Konfiguriere die WordPress REST API für den Zugriff auf JSON-Daten
Konfiguriere die WordPress REST API für den Zugriff auf JSON-Daten

Dies funktioniert für lokale und öffentliche WordPress-Websites und bietet Endpunkte für Inhalte wie Beiträge, Seiten, Kommentare und Medien. Lies unseren vollständigen Leitfaden zur REST-API, um mehr zu erfahren.

Einrichten deiner Next.js-Umgebung

Next.js hilft Entwicklern, Webanwendungen mit Leichtigkeit zu erstellen, die Leistung zu verbessern und die Entwicklung zu optimieren. Eine der wichtigsten Funktionen ist das dateibasierte Routing, das die Erstellung von Routen vereinfacht.

Next.js konzentriert sich auch stark auf die Leistung und bietet Funktionen wie das automatische Code-Splitting, das nur das notwendige JavaScript für jede Seite lädt und so die Ladezeit erheblich verkürzt.

Um ein Next.js-Projekt einzurichten, kannst du den folgenden Befehl ausführen und seine Standardantworten verwenden:

npx create-next-app@latest nextjs-wp-demo

Für diesen Leitfaden kannst du unsere Git-Starter-Vorlage verwenden, indem du die folgenden Schritte ausführst:

  1. Besuche das GitHub-Repository für dieses Projekt.
  2. Wähle Diese Vorlage verwenden > Neues Repository erstellen, um den Starter-Code in ein Repository in deinem GitHub-Konto zu kopieren (aktiviere das Kontrollkästchen, um alle Zweige einzuschließen).
  3. Ziehe das Repository auf deinen lokalen Computer und wechsle mit dem Befehl in den starter-files-Zweig: git checkout starter-files.
  1. Installiere die notwendigen Abhängigkeiten, indem du den Befehl npm install ausführst.

Sobald die Installation abgeschlossen ist, starte das Projekt auf deinem lokalen Computer mit npm run dev. Dadurch wird das Projekt unter http://localhost:3000/ verfügbar .

Ein Screenshot eines mit Next.js erstellten Starterprojekts
Ein Screenshot eines mit Next.js erstellten Starterprojekts

Das Projekt verstehen

Der App Router wurde in Next.js 13 eingeführt und ersetzt das bisherige Seitenverzeichnis für das Routing. Beim Routing mit dem App Router werden ebenfalls Ordner innerhalb des Anwendungs-Verzeichnisses erstellt. Dann verschachtelst du eine page.js-Datei in den entsprechenden Ordner, um deine Route zu definieren.

In diesem Projekt ist app das Hauptverzeichnis, mit dem du interagieren würdest, und du findest die folgende Dateistruktur.

/
|-- /app
    |-- /blog
        |-- /[postId]
        	|-- page.js
        |-- page.js
    |-- globals.css
    |-- layout.js
    |-- navbar.js
    |-- page.js

Es werden drei Seiten erstellt: die Startseite, auf der die grundlegenden Informationen angezeigt werden, die Blogseite, auf der alle Beiträge aus deinem WordPress CMS angezeigt werden, und die dynamische Seite ([postId]/page.js) für die Darstellung einzelner Beiträge.

Du wirst auch die Komponente navbar.js sehen, die in die Datei layout.js importiert wird, um ein Layout für das Projekt zu erstellen.

Daten von WordPress nach Next.js holen

Mit der WordPress REST API kannst du Beiträge, Seiten und benutzerdefinierte Beitragstypen abrufen, indem du HTTP-Anfragen an bestimmte Endpunkte sendest.

Wir stellen eine Anfrage in der Datei blog/page.js, um alle Beiträge in deinem WordPress CMS abzurufen, und stellen dann eine Anfrage, um jeden Beitrag dynamisch in der Datei blog/[postId]/page.js abzurufen, basierend auf dem übergebenen Parameter id.

Bevor wir diese Anfragen stellen, ist es ratsam, die JSON-API-Adresse in eine Umgebungsvariable aufzunehmen. Auf diese Weise wird sichergestellt, dass deine API-Basis-URL leicht konfigurierbar ist und nicht in mehreren Dateien fest codiert wird.

Erstelle eine .env-Datei im Stammverzeichnis deines Next.js-Projekts und füge Folgendes hinzu:

NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2

Ersetze die URL durch die JSON-API deiner Website. Füge außerdem .env zu deiner .gitignore datei hinzu, damit die Datei nicht zu deinem Git-Provider übertragen wird.

Alle Beiträge von WordPress nach Next.js holen

Um alle Beiträge von deiner WordPress-Website abzurufen, erstelle eine asynchrone Funktion namens getPosts in deiner blog/page.js-Datei. Diese Funktion verwendet die Fetch API, um eine GET-Anfrage an den /posts Endpunkt deiner WordPress REST API zu stellen.

async function getPosts() {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
    );
    const posts = await response.json();
    return posts;
}

Nachdem sie die Antwort erhalten hat, wandelt sie diese in JSON um und erstellt ein Array mit Post-Objekten. Diese posts können in deiner Next.js-Anwendung gerendert werden und bieten eine dynamische Liste von Blogbeiträgen, die direkt von WordPress abgerufen werden.

const BlogPage = async () => {
    const posts = await getPosts();
    return (
        <div className="blog-page">
            <h2>All Blog Posts</h2>
            <p>All blog posts are fetched from WordPress via the WP REST API.</p>
            <div className="posts">
                {posts.map((post) => {
                    return (
                        <Link href={`/blog/${post.id}`} className="post" key={post.id}>
                            <h3>{post.title.rendered}</h3>
                            <p
                                dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
                            ></p>
                        </Link>
                    );
                })}
            </div>
        </div>
    );
};

In der Next.js-Seitenkomponente rufst du getPosts asynchron auf, um die Posts zu holen. Dann rufst du map über das Array von posts auf und renderst die title und excerpt jedes Beitrags in einer <Link> Komponente.

Dadurch werden die Beiträge nicht nur angezeigt, sondern auch in einen Link verpackt, der zu einer detaillierten Ansicht des Beitrags führt. Dies wird durch das dateibasierte Routing von Next.js erreicht, bei dem die Post-ID verwendet wird, um den URL-Pfad dynamisch zu generieren.

Dynamische Beiträge von WordPress zu Next.js holen

Im obigen Code ist jeder Beitrag mit einem Link versehen, der den Nutzern helfen soll, zu einer detaillierten Ansicht des Beitrags zu navigieren.

Für einzelne Beitragsseiten verwendest du das dynamische Routing in Next.js, um eine Seite zu erstellen, die einen einzelnen Beitrag anhand seiner ID abruft und anzeigt. Eine dynamische Seite [postID]/page.js ist bereits im Code von stater-files erstellt.

Erstelle eine getSinglePost Funktion, ähnlich wie getPosts, um einen einzelnen Beitrag anhand der als Parameter übergebenen Beitrags-ID abzurufen.

async function getSinglePost(postId) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`
    );
    const post = await response.json();
    return post;
}

In der dynamischen Seitenkomponente extrahierst du die Post-ID aus den URL-Parametern, rufst getSinglePost mit dieser ID auf und renderst den Inhalt des Posts.

const page = async ({ params }) => {
    const post = await getSinglePost(params.postId);
    // ... the rest of the page code
};

Anschließend kannst du die Seite mit den abgerufenen Daten auffüllen:

const page = async ({ params }) => {
    const post = await getSinglePost(params.postId);
    if (!post) {
        return <div>Loading...</div>;
    }
    return (
        <div className="single-blog-page">
            <h2>{post.title.rendered}</h2>
            <div className="blog-post">
                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}></p>
            </div>
        </div>
    );
};

Den vollständigen Code findest du in unserem GitHub-Repository.

Deine Next.js-Anwendung kostenlos bei Kinsta bereitstellen

Der Static Site Hosting Service von Kinsta bietet die Möglichkeit, bis zu 100 statische Websites kostenlos zu hosten.

Dieser Dienst hostet nur statische Dateien. Wenn du einen Static Site Generator wie Next.js verwendest, kannst du Optionen konfigurieren, die dein Projekt von GitHub aus erstellen und die statischen Dateien bei Kinsta bereitstellen.

Statisches Rendering in Next.js

Um einen statischen Export in Next.js ab Version 13 zu aktivieren, ändere den output Modus in next.config.js:

const nextConfig = {
    output: 'export',
};

Wenn du dein Projekt erstellst, wird Next.js nun einen Ordner erstellen, der die HTML-, CSS- und JavaScript-Assets für deine Anwendung enthält.

Seit Version 13 ist es möglich, Next.js als statische Website zu starten und später optional auf Funktionen zu aktualisieren, die einen Server erfordern. Wenn du Serverfunktionen verwendest, werden beim Erstellen deiner Seiten keine statischen Seiten erzeugt.

Bei der dynamischen Route zum Beispiel holst du die Daten dynamisch ab. Du musst in der Lage sein, alle Beiträge statisch zu erstellen. Das kannst du mit der Funktion generateStaticParams machen.

Die Funktion wird in Kombination mit dynamischen Routensegmenten verwendet, um Routen statisch zur Erstellungszeit zu generieren, anstatt bei Bedarf zur Anfragezeit. Wenn du erstellst, wird generateStaticParams ausgeführt, bevor die entsprechenden Layouts oder Seiten generiert werden.

Verwende in [postID]/page.js die Funktion generateStaticParams, um alle Posts zu routen:

export async function generateStaticParams() {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
    );
    const posts = await response.json();

    return posts.map((post) => ({
        postId: post.id.toString(),
    }));
}

Wenn du den Build-Befehl ausführst, erzeugt dein Next.js-Projekt jetzt ein Out-Verzeichnis mit den statischen Dateien.

Next.js auf dem statischen Website-Hosting von Kinsta bereitstellen

Pushe deine Codes zu deinem bevorzugten Git-Anbieter (Bitbucket, GitHub oder GitLab). Befolge dann die folgenden Schritte, um deine statische Next.js-Site bei Kinsta einzurichten:

  1. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
  2. Autorisiere Kinsta mit deinem Git-Anbieter.
  3. Klicke in der linken Seitenleiste auf Statische Seiten und dann auf Website hinzufügen.
  4. Wähle das Repository und den Zweig aus, von dem aus du deployen möchtest.
  5. Gib deiner Site einen eindeutigen Namen.
  6. Füge die Build-Einstellungen in folgendem Format hinzu:
    • Build-Befehl: npm run build
    • Node-Version: 18.16.0
    • Verzeichnis veröffentlichen: out
  1. Zum Schluss klickst du auf Website erstellen.

Und das war’s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erhältst einen Link, über den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst später deine eigene Domain und dein SSL-Zertifikat hinzufügen, wenn du möchtest.

Als Alternative zum statischen Website-Hosting kannst du deine statische Website auch mit dem Anwendungs-Hosting Dienst von Kinsta bereitstellen. Dieser bietet eine größere Hosting-Flexibilität, ein breiteres Spektrum an Vorteilen und Zugang zu robusteren Funktionen wie Skalierbarkeit, individuelle Bereitstellung mit einem Dockerfile und umfassende Analysen mit Echtzeit- und historischen Daten. Außerdem musst du dein Next.js-Projekt nicht für statisches Rendering konfigurieren.

Zusammenfassung

In diesem Artikel hast du gelernt, wie du Headless WordPress in einem Next.js-Projekt nutzen kannst, um Beiträge dynamisch abzurufen und anzuzeigen. Dieser Ansatz ermöglicht die nahtlose Integration von WordPress-Inhalten in Next.js-Anwendungen und bietet ein modernes und dynamisches Web-Erlebnis.

Das Potenzial der Headless CMS API geht über die bloße Anzeige von Beiträgen hinaus; sie ermöglicht das Abrufen und Verwalten von Seiten, Kommentaren, Medien und mehr.

Außerdem muss das Hosting deines WordPress-CMS neben deinen Frontend-Frameworks kein Problem sein. Mit dem MyKinsta-Dashboard von Kinsta hast du eine einheitliche Plattform, mit der du deine WordPress-Websites, -Anwendungen, -Datenbanken und statischen Websites ganz einfach verwalten kannst.

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.