{"id":58644,"date":"2024-03-04T09:08:15","date_gmt":"2024-03-04T08:08:15","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=58644&preview=true&preview_id=58644"},"modified":"2024-03-05T15:26:33","modified_gmt":"2024-03-05T14:26:33","slug":"headless-wordpress-next-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-next-js\/","title":{"rendered":"Zo gebruik je WordPress als een headless CMS voor Next.js"},"content":{"rendered":"

WordPress bestaat al meer dan 20 jaar en volgens W3Techs<\/a> draaien 42,7% van alle websites op internet erop. Het heeft ook een marktaandeel van 62,5% voor content management systems (CMS) op websites.<\/p>\n

Tegenwoordig zijn er veel programmeertalen en frameworks beschikbaar om gebruiksvriendelijke, krachtige websites te bouwen die veel sneller zijn dan WordPress, ongeacht welke optimalisatie je ook doet in je WordPress dashboard. Een voorbeeld is Next.js<\/a>, een populair React framework.<\/p>\n

Deze handleiding laat zien hoe je WordPress kunt gebruiken als een headless CMS, dat gegevens levert voor je Next.js applicatie. Het legt ook uit hoe je je Next.js code als een statische site<\/a> kunt deployen op Kinsta’s gratis Statische Site Hosting<\/a> dienst.<\/p>\n

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

Begrijpen van headless WordPress<\/h2>\n

Headless WordPress verwijst naar het gebruik van WordPress alleen voor de backend mogelijkheden – het beheren en opslaan van inhoud – en het gebruik van een apart systeem, zoals Next.js, voor de frontend presentatie.<\/p>\n

Deze ontkoppeling stelt developers in staat om de robuuste content management tools van WordPress te gebruiken en tegelijkertijd optimaal te profiteren van moderne frontend ontwikkelingsfuncties, zoals server-side rendering en statische site generatie in Next.js.<\/p>\n

Je WordPress site voorbereiden<\/h3>\n

Voordat je in de Next.js ontwikkeling duikt, moet je WordPress site een beetje voorbereid worden om te dienen als een headless CMS<\/a>.<\/p>\n

Als je nog geen WordPress site hebt, kun je er eenvoudig een maken met Kinsta. Er zijn drie methoden om een WordPress site te bouwen met Kinsta:<\/p>\n

    \n
  1. Maak een site op je lokale machine<\/a> (misschien met behulp van onze DevKinsta tools<\/a>) voordat je de site verplaatst naar onze servers<\/li>\n
  2. Maak een site op afstand met behulp van het MyKinsta dashboard<\/a><\/li>\n
  3. Maak een site op afstand met behulp van de Kinsta API<\/a><\/li>\n<\/ol>\n

    Als je eenmaal een WordPress site hebt, zijn er twee benaderingen voor het ophalen van gegevens uit je WordPress CMS in je frontend framework: WPGraphQL en REST API<\/a>.<\/p>\n

    De REST API vergemakkelijkt het ophalen van gegevens in JSON format met behulp van JavaScript benaderingen zoals de Fetch API<\/a> of de Axios<\/a> bibliotheek. De REST API is ingebouwd in WordPress sinds versie 4.7, wat betekent dat er geen plugin nodig is om te werken. Maar om WPGraphQL te gebruiken, waarmee je kunt communiceren met je WordPress gegevens met GraphQL query’s, moet je de WPGraphQL plugin installeren.<\/p>\n

    Laten we voor deze handleiding de REST API gebruiken. Om je WordPress gegevens in een JSON format te krijgen, voeg je \/wp-json\/wp\/v2<\/code> toe aan de URL van je WordPress site:<\/p>\n

    http:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n
    Als de JSON API standaard niet is ingeschakeld wanneer je http:\/\/yoursite.com\/wp-json<\/code> bezoekt, kun je deze inschakelen door Permalinks<\/strong> te openen onder Settings <\/b>in het WordPress dashboard en Post name <\/strong>of een andere keuze te selecteren, behalve Plain<\/strong>:<\/p>\n
    \"Configureer
    Configureer WordPress REST API om toegang te krijgen tot JSON gegevens.<\/figcaption><\/figure>\n
    Dit werkt voor lokale en openbare WordPress sites en biedt endpoints<\/a> voor inhoud waaronder berichten (posts)<\/a>, pagina’s<\/a>, comments<\/a> en media<\/a>. Lees onze volledige gids voor de REST API<\/a> voor meer informatie.<\/p>\n
    Je Next.js omgeving instellen<\/h2>\n
    Next.js helpt developers om eenvoudig webapplicaties te bouwen, door de prestaties te verbeteren en de ontwikkelervaring te optimaliseren. Een van de belangrijkste functies is bestandsgebaseerde routering, die het maken van routes vereenvoudigt.<\/p>\n
    Next.js richt zich ook sterk op prestaties en biedt functies zoals automatische codesplitting<\/a>, waarmee alleen de benodigde JavaScript voor elke pagina wordt geladen, waardoor de laadtijd aanzienlijk wordt verkort.<\/p>\n
    Om een Next.js project op te zetten, kun je het volgende commando uitvoeren en de standaardreacties gebruiken:<\/p>\n
    npx create-next-app@latest nextjs-wp-demo<\/code><\/pre>\n
    Voor deze handleiding kun je onze Git<\/a> Quickstart template gebruiken door deze stappen te volgen:<\/p>\n
      \n
    1. Bezoek de GitHub repository<\/a> van dit project.<\/li>\n
    2. Selecteer Use this template<\/strong> > Create a new repository<\/strong> om de starter code naar een repository binnen je GitHub account te kopi\u00ebren (vink het vakje aan om alle branches mee te nemen<\/strong>).<\/li>\n
    3. Haal het repository naar je lokale computer en schakel over naar de starter-files<\/a> branch met het commando: git checkout starter-files<\/code>.<\/li>\n<\/ol>\n
        \n
      1. Installeer de benodigde dependencies door het commando npm install<\/code> uit te voeren.<\/li>\n<\/ol>\n
        Zodra de installatie is voltooid, start je het project op je lokale computer met npm run dev<\/code>. Hierdoor wordt het project beschikbaar op http:\/\/localhost:3000\/<\/a>.<\/p>\n
        \"Een
        Een screenshot van een startproject gebouwd met Next.js.<\/figcaption><\/figure>\n
        Het project begrijpen<\/h3>\n
        De App Router is ge\u00efntroduceerd in Next.js 13 en vervangt de bestaande pages<\/strong> directory voor routing. Routing met de App Router houdt ook in dat je mappen aanmaakt in de app<\/strong> directory. Vervolgens nest je een page.js<\/strong> bestand in de juiste map om je route te defini\u00ebren.<\/p>\n
        In dit project is app<\/strong> de hoofdmap waar je mee werkt en vind je de volgende bestandsstructuur.<\/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
        Er worden drie pagina’s gemaakt: de startpagina om basisinformatie weer te geven, de blogpagina om alle berichten van je WordPress CMS weer te geven en de dynamische pagina ([postId]\/page.js<\/strong>) om afzonderlijke berichten weer te geven.<\/p>\n
        Je zult ook de navbar.js<\/strong> component zien, die wordt ge\u00efmporteerd in het layout.js<\/strong> bestand om een layout te maken voor het project.<\/p>\n
        Gegevens ophalen van WordPress naar Next.js<\/h2>\n
        Met de WordPress REST API kun je berichten, pagina’s en custom berichttypen ophalen door HTTP verzoeken te sturen naar specifieke endpoints.<\/p>\n
        Laten we een fetch verzoek doen in het blog\/page.js<\/strong> bestand om alle berichten in je WordPress CMS op te halen en vervolgens een verzoek doen om elk bericht dynamisch op te halen in het blog\/[postId]\/page.js<\/strong> op basis van de doorgegeven id<\/code> parameter.<\/p>\n
        Voordat we deze verzoeken doen, is het een goed gebruik om je JSON API adres toe te voegen aan een omgevingsvariabele. Deze aanpak zorgt ervoor dat je API basis URL gemakkelijk configureerbaar is en niet vastgecodeerd in meerdere bestanden.<\/p>\n
        Maak een .env<\/strong> bestand in de root van je Next.js project en voeg het volgende toe:<\/p>\n
        NEXT_PUBLIC_WORDPRESS_API_URL=https:\/\/yoursite.kinsta.cloud\/wp-json\/wp\/v2<\/code><\/pre>\n
        Zorg ervoor dat je de URL vervangt door de JSON API van je site. Voeg ook .env<\/code> toe aan je .gitignore<\/a><\/strong> bestand zodat het het bestand niet naar je Git provider pusht.<\/p>\n
        Alle berichten ophalen van WordPress naar Next.js<\/h3>\n
        Om alle berichten van je WordPress site op te halen, maak je een asynchrone functie met de naam getPosts<\/code> in je blog\/page.js<\/strong> bestand. Deze functie gebruikt de Fetch API om een GET verzoek te doen naar het \/posts<\/code> endpoint van je WordPress REST API.<\/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
        Na ontvangst van de respons wordt de respons omgezet naar JSON en wordt er een array van postobjecten opgebouwd. Deze posts<\/code> kunnen worden weergegeven in je Next.js applicatie, zodat je een dynamische lijst van blogberichten krijgt die rechtstreeks van WordPress zijn opgehaald.<\/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
        Maak een asynchrone call in de Next.js paginacomponent getPosts<\/code> om de berichten op te halen. Vervolgens map<\/code> je de array van posts<\/code> en render je title<\/code> en excerpt<\/code> van elke post in een <Link><\/code> component.<\/p>\n
        Dit geeft niet alleen de berichten weer, maar omhult ze ook met een link die navigeert naar een gedetailleerde weergave van het bericht. Dit wordt bereikt door gebruik te maken van Next.js’s bestandsgebaseerde routing, waarbij de post-ID wordt gebruikt om het URL pad dynamisch te genereren.<\/p>\n
        Dynamisch berichten ophalen van WordPress naar Next.js<\/h3>\n
        In de bovenstaande code is elk bericht verpakt in een link die gebruikers moet helpen om naar een gedetailleerde weergave van het bericht te navigeren.<\/p>\n
        Voor pagina’s met individuele berichten gebruik je dynamische routing in Next.js om een pagina te maken die een enkel bericht ophaalt en weergeeft op basis van zijn ID. Een dynamische pagina [postID]\/page.js<\/strong> is al gemaakt in de stater-bestanden code.<\/p>\n
        Maak een getSinglePost<\/code> functie, vergelijkbaar met getPosts<\/code>, om een enkele post op te halen met de post-ID als parameter.<\/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 de dynamische paginacomponent haal je de post-ID uit de URL-parameters, roep je getSinglePost<\/code> aan met deze ID en render je de inhoud van de post.<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    \/\/ ... the rest of the page code\n};<\/code><\/pre>\n
        Je kunt dan de pagina vullen met de opgehaalde gegevens:<\/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
        Je hebt toegang tot de volledige code op onze GitHub repository<\/a>.<\/p>\n
        Gratis deployen van je Next.js applicatie naar Kinsta<\/h2>\n
        Kinsta’s Statische Site Hosting<\/a> dienst biedt de mogelijkheid om tot 100 statische sites gratis<\/strong> te hosten.<\/p>\n
        Deze service host alleen statische bestanden. Als je een statische site generator<\/a> zoals Next.js gebruikt, kun je opties configureren die je project vanuit GitHub bouwen en de statische bestanden naar Kinsta deployen.<\/p>\n
        Statische rendering in Next.js<\/h3>\n
        Om een statische uitvoer in te schakelen in Next.js versie 13 hierboven, verander je de output<\/code> modus in next.config.js<\/strong>:<\/p>\n
        const nextConfig = {\n    output: 'export',\n};<\/code><\/pre>\n
        Wanneer je nu je project bouwt, wordt er van Next.js verwacht dat het een out<\/strong> folder produceert die de HTML<\/a>, CSS<\/a> en JavaScript<\/a> assets voor je applicatie bevat.<\/p>\n
        Vanaf versie 13 ondersteunt Next.js het starten als een statische site, en dan later optioneel upgraden om functies te gebruiken die een server nodig hebben. Wanneer je serverfuncties gebruikt, zal het bouwen van je pagina’s geen statische pagina’s genereren.<\/p>\n
        In de dynamische route bijvoorbeeld, worden deze gegevens dynamisch opgehaald. Je moet alle berichten statisch kunnen genereren. Dit kan met de functie generateStaticParams<\/code>.<\/p>\n
        De functie wordt gebruikt in combinatie met dynamische route segmenten om statisch routes te genereren tijdens het bouwen in plaats van on-demand tijdens het opvragen. Wanneer je bouwt, wordt generateStaticParams<\/code> uitgevoerd voordat de bijbehorende layouts of pagina’s worden gegenereerd.<\/p>\n
        Gebruik in [postID]\/page.js<\/strong> de functie generateStaticParams<\/code> om alle postroutes te krijgen:<\/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
        Wanneer je het build commando uitvoert, zal je Next.js project nu een out<\/strong> directory genereren met de statische bestanden.<\/p>\n
        Next.js deployen naar Kinsta Statische Site Hosting<\/h3>\n
        Push je codes naar de Git provider van je voorkeur (Bitbucket<\/a>, GitHub<\/a> of GitLab<\/a>). Volg vervolgens deze stappen om je Next.js statische site te deployen naar Kinsta:<\/p>\n
          \n
        1. Log in of maak een account aan om je MyKinsta<\/a> dashboard te bekijken.<\/li>\n
        2. Autoriseer Kinsta met je Git provider.<\/li>\n
        3. Klik op Statische Sites<\/strong> op de linker zijbalk, klik dan op Site toevoegen<\/strong>.<\/li>\n
        4. Selecteer de repository en de branch waarvan je wilt deployen.<\/li>\n
        5. Geef je site een unieke naam.<\/li>\n
        6. Voeg de bouwinstellingen toe in het volgende formaat:\n