{"id":69319,"date":"2024-03-04T09:07:14","date_gmt":"2024-03-04T08:07:14","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69319&preview=true&preview_id=69319"},"modified":"2024-03-07T13:42:23","modified_gmt":"2024-03-07T12:42:23","slug":"headless-wordpress-next-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-next-js\/","title":{"rendered":"Wie man WordPress als Headless CMS f\u00fcr Next.js nutzt"},"content":{"rendered":"

WordPress gibt es seit \u00fcber 20 Jahren und betreibt laut W3Techs<\/a> 42,7 % aller Websites im Internet. Au\u00dferdem h\u00e4lt es einen Marktanteil von 62,5 % bei den Content-Management-Systemen (CMS) hinter Websites.<\/p>\n

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<\/a>, ein beliebtes React-Framework.<\/p>\n

Dieser Leitfaden zeigt dir, wie du WordPress als Headless CMS nutzt und Daten f\u00fcr deine Next.js-Anwendung bereitstellst. Au\u00dferdem wird erkl\u00e4rt, wie du deinen Next.js-Code als statische Website<\/a> auf dem kostenlosen Statische-Seiten-Hosting<\/a> Dienst von Kinsta bereitstellst.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Verst\u00e4ndnis von Headless WordPress<\/h2>\n

Headless WordPress bedeutet, dass WordPress nur f\u00fcr seine Backend-Funktionen – die Verwaltung und Speicherung von Inhalten – verwendet wird und ein separates System wie Next.js f\u00fcr die Frontend-Pr\u00e4sentation eingesetzt wird.<\/p>\n

Diese Entkopplung erm\u00f6glicht 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.<\/p>\n

Vorbereiten deiner WordPress-Seite<\/h3>\n

Bevor du mit der Next.js-Entwicklung beginnst, musst du deine WordPress-Website ein wenig vorbereiten, damit sie als Headless CMS<\/a> genutzt werden kann.<\/p>\n

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:<\/p>\n

    \n
  1. Erstelle eine Website auf deinem lokalen Rechner<\/a> (vielleicht mit unseren DevKinsta-Tools<\/a>), bevor du sie auf unsere Server verschiebst<\/li>\n
  2. Erstelle eine Website aus der Ferne \u00fcber das MyKinsta-Dashboard<\/a><\/li>\n
  3. Erstelle eine Website aus der Ferne \u00fcber die Kinsta-API<\/a><\/li>\n<\/ol>\n

    Sobald du eine WordPress-Site hast, gibt es zwei M\u00f6glichkeiten, um Daten aus deinem WordPress-CMS in dein Frontend-Framework zu \u00fcbertragen: WPGraphQL und REST API<\/a>.<\/p>\n

    Die REST-API erleichtert das Abrufen von Daten im JSON-Format mit JavaScript-Ans\u00e4tzen wie der Fetch-API<\/a> oder der Axios<\/a>-Bibliothek. Die REST-API ist seit Version 4.7 in WordPress integriert, d.h. sie ben\u00f6tigt kein Plugin, um zu funktionieren. Aber um WPGraphQL zu nutzen, mit dem du \u00fcber GraphQL-Abfragen mit deinen WordPress-Daten interagieren kannst, musst du das WPGraphQL-Plugin installieren.<\/p>\n

    F\u00fcr diesen Leitfaden verwenden wir die REST-API. Um deine WordPress-Daten im JSON-Format zu erhalten, h\u00e4nge \/wp-json\/wp\/v2<\/code> an die URL deiner WordPress-Website an:<\/p>\n

    http:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n
    Wenn die JSON-API nicht standardm\u00e4\u00dfig aktiviert ist, wenn du http:\/\/yoursite.com\/wp-json<\/code> besuchst, kannst du sie aktivieren, indem du im WordPress-Dashboard unter Einstellungen<\/strong> Permalinks<\/strong> \u00f6ffnest und Post Name<\/strong> oder eine andere Option deiner Wahl au\u00dfer Plain<\/strong> w\u00e4hlst:<\/p>\n
    \"Konfiguriere
    Konfiguriere die WordPress REST API f\u00fcr den Zugriff auf JSON-Daten<\/figcaption><\/figure>\n
    Dies funktioniert f\u00fcr lokale und \u00f6ffentliche WordPress-Websites und bietet Endpunkte<\/a> f\u00fcr Inhalte wie Beitr\u00e4ge<\/a>, Seiten<\/a>, Kommentare<\/a> und Medien<\/a>. Lies unseren vollst\u00e4ndigen Leitfaden zur REST-API<\/a>, um mehr zu erfahren.<\/p>\n
    Einrichten deiner Next.js-Umgebung<\/h2>\n
    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.<\/p>\n
    Next.js konzentriert sich auch stark auf die Leistung und bietet Funktionen wie das automatische Code-Splitting<\/a>, das nur das notwendige JavaScript f\u00fcr jede Seite l\u00e4dt und so die Ladezeit erheblich verk\u00fcrzt.<\/p>\n
    Um ein Next.js-Projekt einzurichten, kannst du den folgenden Befehl ausf\u00fchren und seine Standardantworten verwenden:<\/p>\n
    npx create-next-app@latest nextjs-wp-demo<\/code><\/pre>\n
    F\u00fcr diesen Leitfaden kannst du unsere Git-Starter-Vorlage<\/a> verwenden, indem du die folgenden Schritte ausf\u00fchrst:<\/p>\n
      \n
    1. Besuche das GitHub-Repository<\/a> f\u00fcr dieses Projekt.<\/li>\n
    2. W\u00e4hle Diese Vorlage verwenden<\/strong> > Neues Repository erstellen<\/strong>, um den Starter-Code in ein Repository in deinem GitHub-Konto zu kopieren (aktiviere das Kontrollk\u00e4stchen, um alle Zweige einzuschlie\u00dfen<\/strong>).<\/li>\n
    3. Ziehe das Repository auf deinen lokalen Computer und wechsle mit dem Befehl in den starter-files-Zweig<\/a>: git checkout starter-files<\/code>.<\/li>\n<\/ol>\n
        \n
      1. Installiere die notwendigen Abh\u00e4ngigkeiten, indem du den Befehl npm install<\/code> ausf\u00fchrst.<\/li>\n<\/ol>\n
        Sobald die Installation abgeschlossen ist, starte das Projekt auf deinem lokalen Computer mit npm run dev<\/code>. Dadurch wird das Projekt unter http:\/\/localhost:3000\/<\/a> verf\u00fcgbar .<\/a><\/p>\n
        \"Ein
        Ein Screenshot eines mit Next.js erstellten Starterprojekts<\/figcaption><\/figure>\n
        Das Projekt verstehen<\/h3>\n
        Der App Router wurde in Next.js 13 eingef\u00fchrt und ersetzt das bisherige Seitenverzeichnis<\/strong> f\u00fcr das Routing. Beim Routing mit dem App Router werden ebenfalls Ordner innerhalb des Anwendungs-Verzeichnisses<\/strong> erstellt. Dann verschachtelst du eine page.js-Datei<\/strong> in den entsprechenden Ordner, um deine Route zu definieren.<\/p>\n
        In diesem Projekt ist app<\/strong> das Hauptverzeichnis, mit dem du interagieren w\u00fcrdest, und du findest die folgende Dateistruktur.<\/p>\n
        \/\n|-- \/app\n    |-- \/blog\n        |-- \/[postId]\n        \t|-- page.js\n        |-- page.js\n    |-- globals.css\n    |-- layout.js\n    |-- navbar.js\n    |-- page.js<\/code><\/pre>\n
        Es werden drei Seiten erstellt: die Startseite, auf der die grundlegenden Informationen angezeigt werden, die Blogseite, auf der alle Beitr\u00e4ge aus deinem WordPress CMS angezeigt werden, und die dynamische Seite ([postId]\/page.js<\/strong>) f\u00fcr die Darstellung einzelner Beitr\u00e4ge.<\/p>\n
        Du wirst auch die Komponente navbar.js<\/strong> sehen, die in die Datei layout.js<\/strong> importiert wird, um ein Layout f\u00fcr das Projekt zu erstellen.<\/p>\n
        Daten von WordPress nach Next.js holen<\/h2>\n
        Mit der WordPress REST API kannst du Beitr\u00e4ge, Seiten und benutzerdefinierte Beitragstypen abrufen, indem du HTTP-Anfragen an bestimmte Endpunkte sendest.<\/p>\n
        Wir stellen eine Anfrage in der Datei blog\/page.js<\/strong>, um alle Beitr\u00e4ge in deinem WordPress CMS abzurufen, und stellen dann eine Anfrage, um jeden Beitrag dynamisch in der Datei blog\/[postId]\/page.js<\/strong> abzurufen, basierend auf dem \u00fcbergebenen Parameter id<\/code>.<\/p>\n
        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.<\/p>\n
        Erstelle eine .env-Datei<\/strong> im Stammverzeichnis deines Next.js-Projekts und f\u00fcge Folgendes hinzu:<\/p>\n
        NEXT_PUBLIC_WORDPRESS_API_URL=https:\/\/yoursite.kinsta.cloud\/wp-json\/wp\/v2<\/code><\/pre>\n
        Ersetze die URL durch die JSON-API deiner Website. F\u00fcge au\u00dferdem .env<\/code> zu deiner .gitignore<\/a><\/strong> datei hinzu, damit die Datei nicht zu deinem Git-Provider \u00fcbertragen wird.<\/p>\n
        Alle Beitr\u00e4ge von WordPress nach Next.js holen<\/h3>\n
        Um alle Beitr\u00e4ge von deiner WordPress-Website abzurufen, erstelle eine asynchrone Funktion namens getPosts<\/code> in deiner blog\/page.js-Datei<\/strong>. Diese Funktion verwendet die Fetch API, um eine GET-Anfrage an den \/posts<\/code> Endpunkt deiner WordPress REST API zu stellen.<\/p>\n
        async function getPosts() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n    return posts;\n}<\/code><\/pre>\n
        Nachdem sie die Antwort erhalten hat, wandelt sie diese in JSON um und erstellt ein Array mit Post-Objekten. Diese posts<\/code> k\u00f6nnen in deiner Next.js-Anwendung gerendert werden und bieten eine dynamische Liste von Blogbeitr\u00e4gen, die direkt von WordPress abgerufen werden.<\/p>\n
        const BlogPage = async () => {\n    const posts = await getPosts();\n    return (\n        <div className=\"blog-page\">\n            <h2>All Blog Posts<\/h2>\n            <p>All blog posts are fetched from WordPress via the WP REST API.<\/p>\n            <div className=\"posts\">\n                {posts.map((post) => {\n                    return (\n                        <Link href={`\/blog\/${post.id}`} className=\"post\" key={post.id}>\n                            <h3>{post.title.rendered}<\/h3>\n                            <p\n                                dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n                            ><\/p>\n                        <\/Link>\n                    );\n                })}\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
        In der Next.js-Seitenkomponente rufst du getPosts<\/code> asynchron auf, um die Posts zu holen. Dann rufst du map<\/code> \u00fcber das Array von posts<\/code> auf und renderst die title<\/code> und excerpt<\/code> jedes Beitrags in einer <Link><\/code> Komponente.<\/p>\n
        Dadurch werden die Beitr\u00e4ge nicht nur angezeigt, sondern auch in einen Link verpackt, der zu einer detaillierten Ansicht des Beitrags f\u00fchrt. Dies wird durch das dateibasierte Routing von Next.js erreicht, bei dem die Post-ID verwendet wird, um den URL-Pfad dynamisch zu generieren.<\/p>\n
        Dynamische Beitr\u00e4ge von WordPress zu Next.js holen<\/h3>\n
        Im obigen Code ist jeder Beitrag mit einem Link versehen, der den Nutzern helfen soll, zu einer detaillierten Ansicht des Beitrags zu navigieren.<\/p>\n
        F\u00fcr 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<\/strong> ist bereits im Code von stater-files erstellt.<\/p>\n
        Erstelle eine getSinglePost<\/code> Funktion, \u00e4hnlich wie getPosts<\/code>, um einen einzelnen Beitrag anhand der als Parameter \u00fcbergebenen Beitrags-ID abzurufen.<\/p>\n
        async function getSinglePost(postId) {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts\/${postId}`\n    );\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n
        In der dynamischen Seitenkomponente extrahierst du die Post-ID aus den URL-Parametern, rufst getSinglePost<\/code> mit dieser ID auf und renderst den Inhalt des Posts.<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    \/\/ ... the rest of the page code\n};<\/code><\/pre>\n
        Anschlie\u00dfend kannst du die Seite mit den abgerufenen Daten auff\u00fcllen:<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    if (!post) {\n        return <div>Loading...<\/div>;\n    }\n    return (\n        <div className=\"single-blog-page\">\n            <h2>{post.title.rendered}<\/h2>\n            <div className=\"blog-post\">\n                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}><\/p>\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
        Den vollst\u00e4ndigen Code findest du in unserem GitHub-Repository<\/a>.<\/p>\n
        Deine Next.js-Anwendung kostenlos bei Kinsta bereitstellen<\/h2>\n
        Der Static Site Hosting<\/a> Service von Kinsta bietet die M\u00f6glichkeit, bis zu 100 statische Websites kostenlos<\/strong> zu hosten.<\/p>\n
        Dieser Dienst hostet nur statische Dateien. Wenn du einen Static Site Generator<\/a> wie Next.js verwendest, kannst du Optionen konfigurieren, die dein Projekt von GitHub aus erstellen und die statischen Dateien bei Kinsta bereitstellen.<\/p>\n
        Statisches Rendering in Next.js<\/h3>\n
        Um einen statischen Export in Next.js ab Version 13 zu aktivieren, \u00e4ndere den output<\/code> Modus in next.config.js<\/strong>:<\/p>\n
        const nextConfig = {\n    output: 'export',\n};<\/code><\/pre>\n
        Wenn du dein Projekt erstellst, wird Next.js nun einen Ordner erstellen, der<\/strong> die HTML-<\/a>, CSS-<\/a> und JavaScript-Assets<\/a> f\u00fcr deine Anwendung enth\u00e4lt.<\/p>\n
        Seit Version 13 ist es m\u00f6glich, Next.js als statische Website zu starten und sp\u00e4ter optional auf Funktionen zu aktualisieren, die einen Server erfordern. Wenn du Serverfunktionen verwendest, werden beim Erstellen deiner Seiten keine statischen Seiten erzeugt.<\/p>\n
        Bei der dynamischen Route zum Beispiel holst du die Daten dynamisch ab. Du musst in der Lage sein, alle Beitr\u00e4ge statisch zu erstellen. Das kannst du mit der Funktion generateStaticParams<\/code> machen.<\/p>\n
        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<\/code> ausgef\u00fchrt, bevor die entsprechenden Layouts oder Seiten generiert werden.<\/p>\n
        Verwende in [postID]\/page.js<\/strong> die Funktion generateStaticParams<\/code>, um alle Posts zu routen:<\/p>\n
        export async function generateStaticParams() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n\n    return posts.map((post) => ({\n        postId: post.id.toString(),\n    }));\n}<\/code><\/pre>\n
        Wenn du den Build-Befehl ausf\u00fchrst, erzeugt dein Next.js-Projekt jetzt ein Out-Verzeichnis<\/strong> mit den statischen Dateien.<\/p>\n
        Next.js auf dem statischen Website-Hosting von Kinsta bereitstellen<\/h3>\n
        Pushe deine Codes zu deinem bevorzugten Git-Anbieter (Bitbucket<\/a>, GitHub<\/a> oder GitLab<\/a>). Befolge dann die folgenden Schritte, um deine statische Next.js-Site bei Kinsta einzurichten:<\/p>\n
          \n
        1. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n
        2. Autorisiere Kinsta mit deinem Git-Anbieter.<\/li>\n
        3. Klicke in der linken Seitenleiste auf Statische Seiten<\/strong> und dann auf Website hinzuf\u00fcgen<\/strong>.<\/li>\n
        4. W\u00e4hle das Repository und den Zweig aus, von dem aus du deployen m\u00f6chtest.<\/li>\n
        5. Gib deiner Site einen eindeutigen Namen.<\/li>\n
        6. F\u00fcge die Build-Einstellungen in folgendem Format hinzu:\n