Bij het bouwen van een dynamische blogwebsite is het niet ongewoon om gegevens te halen uit een contentbron, zoals een CMS (Content Management System) zoals WordPress.

Onlangs had ik de uitdaging om WordPress te integreren in mijn bestaande Next.js project. Ik had een blog die op WordPress gehost was en wilde deze verplaatsen naar mijn Next.js-app.

Ik nodigde een oplossing die mij in staat zou stellen WordPress te gebruiken als een headless CMS. Het doel was simpel: de kracht van WordPress gebruiken voor het beheren van content terwijl ik een moderne frontend-framework gebruikte voor het weergeven van het content.

In dit artikel zullen we doorstappen hoe je WordPress kunt integreren in een Next JS app.

Waarom een Headless CMS gebruiken?

Een headless CMS scheidt de contentbeheer (back-end) van de presentatie laag (front-end). Dit geeft ontwikkelaars meer flexibiliteit over hoe content wordt geleverd en weergegeven, zonder beperkt te worden door traditionele thema’s of lay-outs.

Het is super voor prestaties en schaalbaarheid, en biedt meer controle over hoe content wordt gerenderd op de frontend. In dit geval zal je WordPress gebruiken als je contentbeheersysteem, maar het content in een modernere en performantere manier weergeven met behulp van Next.js.

Wat is Next.js?

Als je Next.js nog niet tegenkomt, is het een krachtig frame-work gebaseerd op React dat het makkelijker maakt om geoptimaliseerde, server-side gerenderde (SSR) applicaties te bouwen.

Het biedt een heleboel functies uit de verpakking, zoals bestanden-gebaseerde routing, API-routes, statische sitegeneratie (SSG) en incrementele statische hergeneratie (ISR). Alles maakt het een uitstekkeke keuze voor het maken van snel, SEO-vriendelijke websites.

Hoe wordt WordPress en Next.js verbonden?

Als u WordPress gebruikt als een headless CMS, zijn er twee hoofdwegen om uw Next.js-toepassing te verbinden met uw WordPress-backend:

  1. WP REST API: WordPress beschikt over een ingebouwde REST API, die u toelaat om content uit WordPress in JSON-formaat op te halen.

  2. WPGraphQL: WordPress ondersteunt headless contentbeheer door de toepassing van GraphQL (met plugins zoals WPGraphQL), wat het gemakkelijker maakt om specifiek content, zoals blogposts, op te halen voor gebruik in een front-end framework zoals React.

Hoewel de REST API populair is, zal het goed zijn om mee te gaan met WPGraphQL, want het biedt meer accurate queries en flexibiliteit. Met GraphQL kunt u exact het gegevens verzoek dat u nodig heeft, wat kan leiden tot een vermindering van het overdrachtgedeelte en verbeterde prestaties.

Stappen om WordPress en Next.js te verbinden met behulp van WPGraphQL

Het eerste dat u moet doen is de WPGraphQL-plugin te installeren op uw WordPress-site. Deze plugin biedt functionaliteit van de GraphQL API binnen WordPress. U kunt de plugin net als elke andere installeren door naar de WordPress-beheerpaneel te navigeren.

Begin met het gaan naar Plugins en selecteer Add New. Vervolgens zoek u naar WPGraphQL en zodra u het vindt, kunt u de plugin eenvoudig installeren en activeren.

Nadat u de plugin heeft geïnstalleerd en geactiveerd, verschijnt de GraphQL IDE in het WordPress-beheerpaneel. Hier kunt u verschillende queries testen die u misschien nodig heeft voor uw frontend-ontwikkeling.

Laten we nu naar de frontend gaan.

Hoe u data van WPGraphQL in Next.js ophaalt

In uw Next.js-project moet u gegevens van de GraphQL API ophalen. Hier is een eenvoudig voorbeeld dat gebruik maakt van graphql-request:

1. Installeer graphql-request om makkelijk queries uit te voeren op de GraphQL API:

npm install graphql-request

2. In uw Next.js-component maak u een GraphQL-query om blogposts te halen:

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 het code hierboven haalt uw Next.js-app blogposts van uw WordPress-backend op via GraphQL en toont ze aan de voorgevel. De GraphQL-query wordt gemaakt om postdetails zoals de titel, auteur, inhoud en uitgelichte afbeelding te verkrijgen.

Met behulp van Next.js getStaticProps worden de gegevens gehaald tijdens de bouw en doorgegeven als properties aan het component. De blogposts worden getoond door middel van aangepaste componenten zoals BlogHeader, BlogPosts en BlogNewsletter, waardoor de pagina dynamisch en efficient wordt.

Dit toont aan hoe WordPress gebruikt kan worden als een headless CMS voor een Next.js applicatie. Nu je WordPress succesvol hebt geïntegreerd als een headless CMS in je Next.js applicatie, kun je doorgaan met het ophalen van meer gegevens van de GraphQL API om de functionaliteit van je app te verbeteren.

Conclusie

Door WordPress te gebruiken als een headless CMS en Next.js voor de frontend, kunnen we een snelle, SEO-vriendelijke blog bouwen en tegelijkertijd profiteren van de krachtige content management functies van WordPress.

Het gebruik van WPGraphQL stelde ons in staat om efficiënt alleen de benodigde gegevens op te halen, waardoor we meer controle kregen en de prestaties van de site verbeterden.

Ik hoop dat dit nuttig was. Veel plezier met coderen!