Zo gebruik je WordPress als een headless CMS voor Next.js

ict

[ad_1]

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

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, een populair React framework.

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 kunt deployen op Kinsta’s gratis Statische Site Hosting dienst.

Begrijpen van headless WordPress

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.

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.

Je WordPress site voorbereiden

Voordat je in de Next.js ontwikkeling duikt, moet je WordPress site een beetje voorbereid worden om te dienen als een headless CMS.

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:

  1. Maak een site op je lokale machine (misschien met behulp van onze DevKinsta tools) voordat je de site verplaatst naar onze servers
  2. Maak een site op afstand met behulp van het MyKinsta dashboard
  3. Maak een site op afstand met behulp van de Kinsta API

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.

De REST API vergemakkelijkt het ophalen van gegevens in JSON format met behulp van JavaScript benaderingen zoals de Fetch API of de Axios 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.

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 toe aan de URL van je WordPress site:

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

Als de JSON API standaard niet is ingeschakeld wanneer je http://yoursite.com/wp-json bezoekt, kun je deze inschakelen door Permalinks te openen onder Settings in het WordPress dashboard en Post name of een andere keuze te selecteren, behalve Plain:

Configureer WordPress REST API om toegang te krijgen tot JSON gegevens.
Configureer WordPress REST API om toegang te krijgen tot JSON gegevens.

Dit werkt voor lokale en openbare WordPress sites en biedt endpoints voor inhoud waaronder berichten (posts), pagina’s, comments en media. Lees onze volledige gids voor de REST API voor meer informatie.

[ad_2]

https://kinsta.com/nl/blog/headless-wordpress-next-js/