Beim Aufbau eines dynamischen Blog-Websites ist es häufig notwendig, Daten von einer Inhaltsquelle abzurufen, wie z.B. einem CMS (Content Management System) wie WordPress.

Kürzlich habe ich die Herausforderung gestellt, WordPress in mein bestehendes Next.js-Projekt zu integrieren. Ich hatte einen Blog auf WordPress gehostet und wollte ihn in meine Next.js-App verschieben.

Ich brauchte eine Lösung, die es mir ermöglicht hätte, WordPress als Headless-CMS zu verwenden. Das Ziel war einfach: die Leistung von WordPress für den Inhalt Management zu nutzen und dafür ein modernes Frontend-Framework zu verwenden.

In diesem Artikel gehen wir durch, wie WordPress in eine Next JS-App integriert werden kann.

Warum ein Headless CMS verwenden?

Ein Headless CMS trennt die Inhaltsverwaltung (Back-End) von der Darstellungsebene (Front-End). Dies gibt Entwicklern mehr Flexibilität darüber, wie Inhalte bereitgestellt und dargestellt werden können, ohne von traditionellen Themen oder Layouts eingeschränkt zu werden.

Es ist ideal für Leistung und Skalierbarkeit und bietet mehr Kontrolle darüber, wie Inhalte im Frontend dargestellt werden. In diesem Fall verwendet du WordPress als Inhaltsmanagementsystem, um den Inhalt aber in einem moderneren und performanteren Weise mit Next.js anzuzeigen.

Was ist Next.js?

Wenn du Next.js bisher nicht kennst, ist es ein kraftvolles React-basiertes Framework, das das Erstellen optimierter, serverseitig gerenderter (SSR) Anwendungen deutlich einfacher macht.

Es bietet eine Reihe von Features aus dem Stapel, wie Dateibasierte Routen, API-Routen, statische Site-Generierung (SSG) und inkrementelle statische Wiederherstellung (ISR). Alle diese machen es zu einer großartigen Wahl für die Erstellung schneller, SEO-freundlicher Websites.

Wie kann WordPress mit Next.js verbunden werden?

Wenn WordPress als Headless-CMS verwendet wird, gibt es zwei Hauptmethoden, um Ihre Next.js-Anwendung mit Ihrem WordPress-Backend zu verknüpfen:

  1. WP REST API: WordPress verfügt über eine integrierte REST API, die es Ihnen erlaubt, Inhalte aus WordPress in JSON-Format abzurufen.

  2. WPGraphQL: WordPress unterstützt headless Inhaltsverwaltung durch die Verwendung von GraphQL (mit Plugins wie WPGraphQL), was es einfacher macht, bestimmte Inhalte, wie z.B. Blogbeiträge, abzurufen und in einem Frontend-Framework wie React zu verwenden.

Obwohl die REST API beliebt ist, werden wir uns für WPGraphQL entschieden haben, weil es für präzise Abfragen und Flexibilität sorgt. Mit GraphQL können Sie exakt die Daten abfragen, die Sie brauchen, was die Datenmenge reduziert und die Leistung verbessert.

Schritte zur Verbindung von WordPress und Next.js mittels WPGraphQL

Der erste Schritt besteht darin, das WPGraphQL-Plugin auf Ihrer WordPress-Website zu installieren. Dieses Plugin ermöglicht die Funktionalität der GraphQL-API innerhalb von WordPress. Sie können das Plugin wie jedes andere installieren, indem Sie zum WordPress-Admin-Bereich navigieren.

Zuerst gehen Sie zu Plugins und wählen Sie Hinzufügen. Dann suchen Sie nach WPGraphQL und installieren und aktivieren Sie das Plugin, sobald Sie es gefunden haben.

Nach der Installation und Aktivierung des Plugins erscheint die GraphQL-IDE im WordPress-Dashboard. Hier können Sie verschiedene Abfragen testen, die Sie für Ihre Frontend-Entwicklung benötigen.

Lassen Sie uns jetzt zu der Frontendseite gehen.

Wie man Daten von WPGraphQL in Next.js abruft

In Ihrem Next.js-Projekt müssen Sie Daten von der GraphQL-API abrufen. Hier ist ein einfaches Beispiel mit graphql-request:

1. Installieren Sie graphql-request, um das Abrufen der GraphQL-API zu vereinfachen:

npm install graphql-request

2. In Ihrem Next.js-Komponenten erstellen Sie einen GraphQL-Aufruf, um die Blogbeiträge abzurufen:

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

In dem obenstehenden Code holt Ihre Next.js-App Blogbeiträge von Ihrem WordPress-Backend mithilfe von GraphQL und zeigt sie auf der Frontendseite an. Der GraphQL-Aufruf ist dafür konzipiert, Details wie den Titel, den Autor, den Inhalt und das Beitragsbild abzurufen.

Mit Hilfe von Next.js getStaticProps werden die Daten während des Buildvorganges abgerufen und als Props an die Komponente weitergegeben. Die Blogbeiträge werden durch benutzerdefinierte Komponenten wie BlogHeader, BlogPosts und BlogNewsletter gerendert, was die Seite dynamisch und effizient macht.

Dies zeigt an, wie WordPress als Headless-CMS für eine Next.js-Anwendung verwendet werden kann. Nun, da Sie WordPress erfolgreich als Headless-CMS in Ihrer Next.js-Anwendung integriert haben, können Sie fortfahren, weitere Daten von der GraphQL-API abzurufen, um die Funktionalität Ihrer App zu verbessern.

Fazit

Durch die Verwendung von WordPress als Headless-CMS und Next.js für die Frontend-Seite, können wir ein schnelles, SEO-freundliches Blog aufbauen, während wir die leistungsfähigen Inhaltsverwaltungsfunktionen von WordPress nutzen.

Durch die Nutzung von WPGraphQL konnten wir effizient nur die notwendigen Daten abrufen, was uns mehr Kontrolle und eine Verbesserung der Seitenleistung ermöglichte.

Ich hoffe, dass dies hilfreich war. Viel coding Vergnügen!