{"id":58991,"date":"2024-04-02T13:12:25","date_gmt":"2024-04-02T11:12:25","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=58991&#038;preview=true&#038;preview_id=58991"},"modified":"2024-04-05T09:22:03","modified_gmt":"2024-04-05T07:22:03","slug":"headless-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/","title":{"rendered":"Zo parse je Gutenberg content voor headless WordPress"},"content":{"rendered":"<p>Gutenberg is de standaard editor voor <a href=\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-next-js\/\">WordPress<\/a>. Met de editor kun je inhoud maken en stylen met behulp van afzonderlijke blokken voor tekst, afbeeldingen, video en andere site-elementen via een drag-and-drop interface. Deze aanpak vergroot de flexibiliteit en ontwerpmogelijkheden van WordPress.<\/p>\n<p>Deze handleiding legt uit hoe je Gutenberg inhoud als <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a> kunt parsen met behulp van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/rest-api-wordpress\/\">WordPress REST API<\/a> in een statische <a href=\"https:\/\/kinsta.com\/blog\/next-js\/\">Next.js<\/a> site. <div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Vereisten<\/h2>\n<p>Om mee te kunnen volgen, heb je nodig:<\/p>\n<ul>\n<li>Node.js en npm (<a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">Node Package Manager<\/a>) of yarn ge\u00efnstalleerd op je computer<\/li>\n<li>Basiskennis van <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> en <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/wordpress-aan-de-slag\/nieuwe-site\/\">WordPress site<\/a> met een paar gepubliceerde berichten<\/li>\n<\/ul>\n<h2>Gutenberg inhoud ophalen met behulp van een REST API<\/h2>\n<p>Om programmatisch te communiceren met je WordPress site en inhoud op te halen die is gestructureerd in <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">Gutenberg blokken<\/a>, gebruik je de WordPress REST API of de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wpgraphql-en-wp-rest-api\/\">WPGraphQL plugin<\/a>. Met deze tools kun je je WordPress inhoud ophalen in JSON format.<\/p>\n<p>Om JSON gegevenstoegang via de REST API mogelijk te maken, pas je de instellingen van je WordPress permalink aan, weg van &#8220;Gewoon&#8221; Hierdoor krijg je toegang tot de API via een gestructureerde URL, zoals hieronder:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n<p>Door API verzoeken te doen aan deze URL, kun je programmatisch verschillende informatie ophalen en bewerkingen uitvoeren op je WordPress site. Je kunt bijvoorbeeld een lijst met berichten ophalen door een GET verzoek te sturen naar:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n<p>Dit retourneert een JSON object met informatie over de berichten op je WordPress site, waaronder titels, inhoud, details van de auteur en meer.<\/p>\n<h2>Gutenberg blokken als HTML parsen<\/h2>\n<p>Bij het ophalen van berichten van een WordPress site die de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">Gutenberg editor<\/a> gebruikt, kan de opgeslagen inhoud in de database een mix van HTML en JSON metadata bevatten om verschillende bloktypes te beschrijven, zoals citaten en galerijen. Bijvoorbeeld:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:quote {\"className\":\"inspirational-quote\",\"style\":{\"typography\":{\"fontSize\":\"large\"}}} --&gt;\n&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n&lt;!-- \/wp:quote --&gt;\n\n&lt;!-- wp:gallery {\"ids\":[34,35],\"columns\":2,\"linkTo\":\"none\",\"sizeSlug\":\"medium\",\"className\":\"custom-gallery\"} --&gt;\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;\/ul&gt;\n&lt;!-- \/wp:gallery --&gt;\n<!-- \/wp:gallery --><\/code><\/pre>\n<p>Dit fragment illustreert twee Gutenberg blokken: een citaat en een galerij. Elk is aangevuld met JSON metagegevens die zijn ingekapseld in HTML-commentaren. De metadata defini\u00ebren attributen zoals klassenamen, stijlen en andere configuraties die relevant zijn voor de presentatie van het blok.<\/p>\n<p>Wanneer je deze blokken ophaalt via de WordPress REST API of WPGraphQL, verwerkt WordPress ze en transformeert de combinatie van HTML en JSON metadata in volledig gerenderde HTML elementen die je direct in webpagina&#8217;s kunt opnemen. De getransformeerde HTML voor de bovenstaande blokken zou er als volgt uitzien:<\/p>\n<pre><code class=\"language-html\">&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Voor developers die ontkoppelde of headless toepassingen bouwen met behulp van JavaScript frameworks zoals Next.js, is dit een eenvoudige methode om inhoud weer te geven door de HTML direct in de pagina te injecteren met behulp van de property <code>dangerouslySetInnerHTML<\/code> om de opmaak weer te geven.<\/p>\n<pre><code class=\"language-html\">&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code><\/pre>\n<p>Daarnaast moet je misschien verdere opmaak uitvoeren voor elementen zoals links en omgaan met overtollige newline-tekens (<code>\\n<\/code>), wat later in deze handleiding wordt uitgelegd.<\/p>\n<h2>De inhoud van Gutenberg-blokken parsen in een statische site Next.js<\/h2>\n<p>In dit gedeelte gaan we WordPress content ophalen in een Next.js project en vervolgens de Gutenberg blokken als HTML parsen.<\/p>\n<ol start=\"1\">\n<li>Begin met het instellen van een functie om berichten van je WordPress site op te halen. Open het bestand <strong>src\/page.js<\/strong> in je project en vervang de inhoud door het volgende codefragment:\n<pre><code class=\"language-jsx\">const getWpPosts = async () =&gt; {\n\tconst res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n  \tconst posts = await res.json();\n\treturn posts;\n};<\/code><\/pre>\n<p>Deze asynchrone functie voert een API verzoek uit naar de WordPress REST API. Het haalt alle berichten op die beschikbaar zijn op je site en stuurt ze terug als een array.<\/li>\n<li>Laten we vervolgens de opgehaalde berichten gebruiken in een eenvoudige Next.js paginacomponent door de berichten naar de console te loggen en een basisbegroeting weer te geven:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n  console.log(posts);\n  \n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Hello World&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>Wanneer je je project uitvoert met <code>npm run dev<\/code>, wordt het bericht &#8220;Hello World&#8221; weergegeven en worden de opgehaalde berichten naar de Terminal gelogd.<\/p>\n<pre><code class=\"language-json\">[\n  {\n    \"_links\" : {\n      \"about\" : [...],\n      \"author\" : [...],\n      \"collection\" : [...],\n      \"curies\" : [...],\n      \"predecessor-version\" : [...],\n      \"replies\" : [...],\n      \"self\" : [...],\n      \"version-history\" : [...],\n      \"wp:attachment\" : [...],\n      \"wp:term\" : [...]\n    },\n    \"author\" : 1,\n    \"categories\" : [...],\n    \"comment_status\" : \"open\",\n    \"content\" : {\n      \"protected\" : false,\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    \"date\" : \"2024-02-27T12:08:30\",\n    \"date_gmt\" : \"2024-02-27T12:08:30\",\n    \"excerpt\" : {\n      \"protected\" : false,\n      \"rendered\" : \"&lt;p&gt;Fire, a primal force, captivates with its flickering flames, evoking both awe and caution. Its dance symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate. In ancient times, fire was a beacon of light and warmth, [\u2026]&lt;\/p&gt;\\n\"\n    },\n    \"featured_media\" : 0,\n    \"format\" : \"standard\",\n    \"guid\" : {\n      \"rendered\" : \"https:\/\/yoursite.com\/?p=13\"\n    },\n    \"id\" : 13,\n    \"link\" : \"https:\/\/yoursite.com\/?p=13\",\n    \"meta\" : {\n      \"footnotes\" : \"\"\n    },\n    \"modified\" : \"2024-02-29T16:45:36\",\n    \"modified_gmt\" : \"2024-02-29T16:45:36\",\n    \"ping_status\" : \"open\",\n    \"slug\" : \"fire-fire\",\n    \"status\" : \"publish\",\n    \"sticky\" : false,\n    \"tags\" : [],\n    \"template\" : \"\",\n    \"title\" : {\n      \"rendered\" : \"Fire\"\n    },\n    \"type\" : \"post\"\n   },\n  },\n  ...\n]<\/code><\/pre>\n<p>De JSON objecten die individuele Gutenberg berichtdata vertegenwoordigen, bevatten verschillende velden, waaronder de velden inhoud en excerpt die worden geretourneerd als Gutenberg blokken die zijn geparst als HTML strings.<\/li>\n<li>Om deze HTML inhoud correct weer te geven in Next.js, gebruiken we de property <code>dangerouslySetInnerHTML<\/code>:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt; Headless Blog &lt;\/h1&gt;\n\n      &lt;div&gt;\n        {posts.map((post) =&gt; (\n          &lt;Link href={'\/blog\/' + post.id} key={post.id}&gt;\n            &lt;h2&gt;\n              {post.title.rendered} &lt;span&gt;-&gt;&lt;\/span&gt;\n            &lt;\/h2&gt;\n            &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n          &lt;\/Link&gt;\n        ))}\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>In dit bijgewerkte component mappen we over de opgehaalde posts array om een lijst van post uittreksels te genereren. Elk uittreksel is verpakt in een <code>Link<\/code> component voor navigatie, die de titel van het bericht en een stukje van de inhoud weergeeft. <\/p>\n<p>De property <code>dangerouslySetInnerHTML<\/code> wordt gebruikt om de HTML inhoud in het veld <code>excerpt.rendered<\/code> te parsen en te renderen.<\/li>\n<li>Maak vervolgens een bestand <strong>blog\/[id]\/page.js<\/strong> in de <strong>app<\/strong> directory. Je gebruikt mappen om routes te defini\u00ebren. Dus door een <strong>blogmap<\/strong> te maken, definieer je de <strong>blogroute<\/strong>. Je combineert dit met <a href=\"https:\/\/kinsta.com\/blog\/next-js\/#dynamic-routes\">dynamische routing<\/a> om routes te genereren voor elke post.<\/li>\n<li>Elke post heeft een ID. Je gebruikt deze ID om zijn unieke route te genereren, <code>\/blog\/{post_id}<\/code>in je applicatie. Voeg de volgende code toe:\n<pre><code class=\"language-jsx\">import Link from 'next\/link';\n\nexport async function generateStaticParams() {\n    const res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n    const posts = await res.json();\n    return posts.map((post) =&gt; {\n        return {\n            params: {\n                id: post.id.toString(),\n            },\n        };\n    });\n}\n\nexport async function getPost(id) {\n    const response = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/' + id);\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n<p>De <code>generateStaticParams()<\/code> functie genereert statisch routes tijdens het bouwen op basis van de overeenkomstige ID die bij elke post wordt geretourneerd. De functie <code>getPost()<\/code> haalt Gutenberg gegevens op uit de REST API voor het bericht met een doorgegeven ID. <\/p>\n<p>Een eerdere sectie toonde een voorbeeld van Gutenberg gegevens die zijn teruggestuurd uit de REST API voor een bericht. Op dit moment houden we ons alleen bezig met het veld <code>content.rendered<\/code>:<\/p>\n<pre><code class=\"language-json\">[\n  {\n    ...\n    \"content\": {\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    ...\n  }\n]<\/code><\/pre>\n<p>Dit veld bevat de ruwe HTML van de post. Het kan direct worden gerenderd met behulp van de <code>dangerouslySetInnerHTML<\/code> property zoals dit, <code>&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code>.<\/li>\n<li>Vervolgens kun je de gegevens verwerken door interne links te parsen en het formaat van afbeeldingen aan te passen. Installeer het pakket <code>html-react-parser<\/code> om het parsen van tags te vereenvoudigen:\n<pre><code class=\"language-bash\">npm install html-react-parser --save<\/code><\/pre>\n<\/li>\n<li>Voeg de volgende code toe aan het bestand <strong>blog\/[id]\/page.js<\/strong>:\n<pre><code class=\"language-javascript\">import parse, { domToReact } from \"html-react-parser\";\n\n\/*\n * We use a regular expression (pattern) to match the specific URL you want to replace.\n * The (\\d+) part captures the numeric ID after ?p=.\n * Then, we use the replacement string 'data-internal-link=\"true\" href=\"\/blog\/$1\"',\n * where $1 is a placeholder for the captured ID.\n *\/\nexport function fixInternalLinks(html_string) {\n  const pattern = \/href=\"https:\\\/\\\/yoursite.com\\\/\\?p=(\\d+)\"\/g;\n  const replacement = 'data-internal-link=\"true\" href=\"\/blog\/$1\"';\n\n  return html_string.replace(pattern, replacement);\n}\n\nexport function parseHtml(html) {\n  \/\/ Replace 2+ sequences of '\\n' with a single '&lt;br \/&gt;' tag\n  const _content = html.replace(\/\\n{2,}\/g, '&lt;br \/&gt;');\n  const content = fixInternalLinks(_content);\n\n  const options = {\n    replace: ({ name, attribs, children }) =&gt; {\n      \/\/ Convert internal links to Next.js Link components.\n      const isInternalLink =\n        name === \"a\" && attribs[\"data-internal-link\"] === \"true\";\n\n      if (isInternalLink) {\n        return (\n          &lt;Link href={attribs.href} {...attribs}&gt;\n            {domToReact(children, options)}\n          &lt;\/Link&gt;\n    \t  );\n      } else if (name === \"img\") {\n        attribs[\"width\"] = \"250\";\n        attribs[\"height\"] = \"150\";\n        return (\n          &lt;img {...attribs}\/&gt;\n        );\n      }\n    },\n  };\n\n  return parse(content, options);\n}<\/code><\/pre>\n<p>De <code>fixInternalLinks()<\/code> functie gebruikt een reguliere expressie om links naar berichten op je WordPress site te vinden in de HTML string. In de ruwe HTML kun je zien dat het bericht een <code>List<\/code> tag bevat met links naar andere berichten op je site, waarbij die links worden vervangen door interne links naar routes op je statische site.<\/p>\n<p>De functie <code>parseHTML()<\/code> vindt meerdere reeksen van overtollige newlines, <code>n<\/code>en vervangt ze door <code>&lt;br \/&gt;<\/code> tags. Het vindt ook interne links en zet de anchor tags om in Link tags. Vervolgens past deze functie de grootte van afbeeldingen aan met behulp van tag-attributen.<\/li>\n<li>Om de hoofd UI voor elke dynamische route te genereren, voeg je de volgende code toe:\n<pre><code class=\"language-javascript\">export default async function Post({ params }) {\n  const post = await getPost(params.id);\n\n  const content = parseHtml(post.content.rendered);\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt;\n        {post.title.rendered}\n      &lt;\/h1&gt;\n \t \n      &lt;div&gt;{content}&lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<p>Na het parsen van de ruwe HTML uit de Gutenberg gegevens, retourneert de code JSX die de opgemaakte UI van de pagina weergeeft.<\/li>\n<\/ol>\n<p>Tot slot, wanneer je je project uitvoert, zal de startpagina een lijst met berichten op je WordPress weergeven. Als je op individuele berichten klikt, zie je ook de inhoud van Gutenberg op de juiste manier weergegeven.<\/p>\n<h2>Deploy je Next.js statische site op Kinsta<\/h2>\n<p>Wanneer je headless WordPress combineert met geavanceerde frameworks zoals Next.js, wordt het vinden van een kosteneffectieve deployment-oplossing, vooral wanneer je een <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/\">krachtige WordPress Hosting<\/a> zoals die van Kinsta gebruikt voor je WordPress site. De <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Statische Site Hosting<\/a> service van Kinsta biedt een naadloze en betaalbare manier om je site online te brengen.<\/p>\n<p>Met Kinsta kun je tot <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">100 statische websites <strong>gratis<\/strong> hosten<\/a>. Eerst push je je code naar een Git provider van je voorkeur (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> of <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Zodra je repo klaar is, volg je deze stappen om je statische site te deployen naar Kinsta:<\/p>\n<ol start=\"1\">\n<li>Log in of maak een account aan om je <a href=\"https:\/\/my.kinsta.com\/?lang=nl\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a> dashboard te bekijken.<\/li>\n<li>Autoriseer Kinsta met je Git provider.<\/li>\n<li>Klik op <strong>Statische sites<\/strong> op de linker zijbalk, klik dan op <strong>Site toevoegen<\/strong>.<\/li>\n<li>Selecteer de repository en de branch van waaruit je wilt deployen.<\/li>\n<li>Geef je site een unieke naam.<\/li>\n<li>Voeg de bouwinstellingen toe in het volgende format:\n<ul>\n<li><strong>Build commando<\/strong>: <code>npm run build<\/code><\/li>\n<li><strong>Node versie<\/strong>: <code>18.16.0<\/code><\/li>\n<li><strong>Publish directory<\/strong>: <code>out<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Klik ten slotte op <strong>Maak site<\/strong>.<\/li>\n<\/ol>\n<p>En dat is het! Je hebt nu binnen een paar seconden een uitgerolde site. Je krijgt een link waarmee je naar de ge\u00efmplementeerde versie van je site kunt gaan. Als je wilt, kun je later je <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">eigen domein<\/a> en <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">SSL certificaat<\/a> toevoegen.<\/p>\n<p>Als alternatief voor statische site hosting kun je ervoor kiezen om je statische site te implementeren met Kinsta&#8217;s <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Application Hosting<\/a> service, die meer flexibiliteit biedt bij het hosten, een breder scala aan voordelen en toegang tot robuustere functies &#8211; zoals schaalbaarheid, aangepaste implementatie met behulp van een Dockerfile en <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">uitgebreide analyses<\/a> met real-time en historische gegevens. Je hoeft je Next.js project ook niet te configureren voor statische rendering.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Deze handleiding heeft uitgelegd hoe je Gutenberg blokinhoud effectief kunt integreren en parsen als HTML via de WordPress API. Dit maakt het renderen van elk type content op je front-end mogelijk wanneer je headless WordPress gebruikt.<\/p>\n<p>Je kunt je headless WordPress hosten op onze managed WordPress Hosting service en je statische site inzetten op onze Statische Site Hosting service. Dit betekent dat alles over je site in \u00e9\u00e9n dashboard staat: MyKinsta.<\/p>\n<p>Door voor Kinsta te kiezen, profiteer je van een hostingprovider die prioriteit geeft aan optimale siteprestaties en schaalbaarheid, terwijl websites sterk worden versterkt met geavanceerde beveiligingsmaatregelen. <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Probeer Kinsta vandaag<\/a> nog!<\/p>\n<p><em>Wat vind jij van headless WordPress en de rendering ervan? Heb je een betere manier om Gutenberg blokken te integreren? Deel je idee\u00ebn in de commentsectie!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg is de standaard editor voor WordPress. Met de editor kun je inhoud maken en stylen met behulp van afzonderlijke blokken voor tekst, afbeeldingen, video en &#8230;<\/p>\n","protected":false},"author":199,"featured_media":58992,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[842,847],"class_list":["post-58991","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-headless-cms","topic-javascript-frameworks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zo parse je Gutenberg content voor headless WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer hoe je geparste Gutenberg inhoud als HTML in je site kunt integreren met deze gedetailleerde handleiding. Het laat zien hoe je de inhoud in Next.js kunt gebruiken.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo parse je Gutenberg content voor headless WordPress\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je geparste Gutenberg inhoud als HTML in je site kunt integreren met deze gedetailleerde handleiding. Het laat zien hoe je de inhoud in Next.js kunt gebruiken.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-02T11:12:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-05T07:22:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer hoe je geparste Gutenberg inhoud als HTML in je site kunt integreren met deze gedetailleerde handleiding. Het laat zien hoe je de inhoud in Next.js kunt gebruiken.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Zo parse je Gutenberg content voor headless WordPress\",\"datePublished\":\"2024-04-02T11:12:25+00:00\",\"dateModified\":\"2024-04-05T07:22:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/\"},\"wordCount\":1484,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/\",\"name\":\"Zo parse je Gutenberg content voor headless WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"datePublished\":\"2024-04-02T11:12:25+00:00\",\"dateModified\":\"2024-04-05T07:22:03+00:00\",\"description\":\"Leer hoe je geparste Gutenberg inhoud als HTML in je site kunt integreren met deze gedetailleerde handleiding. Het laat zien hoe je de inhoud in Next.js kunt gebruiken.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo parse je Gutenberg content voor headless WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo parse je Gutenberg content voor headless WordPress - Kinsta\u00ae","description":"Leer hoe je geparste Gutenberg inhoud als HTML in je site kunt integreren met deze gedetailleerde handleiding. Het laat zien hoe je de inhoud in Next.js kunt gebruiken.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo parse je Gutenberg content voor headless WordPress","og_description":"Leer hoe je geparste Gutenberg inhoud als HTML in je site kunt integreren met deze gedetailleerde handleiding. Het laat zien hoe je de inhoud in Next.js kunt gebruiken.","og_url":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-04-02T11:12:25+00:00","article_modified_time":"2024-04-05T07:22:03+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Leer hoe je geparste Gutenberg inhoud als HTML in je site kunt integreren met deze gedetailleerde handleiding. Het laat zien hoe je de inhoud in Next.js kunt gebruiken.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Jeremy Holcombe","Geschatte leestijd":"11 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Zo parse je Gutenberg content voor headless WordPress","datePublished":"2024-04-02T11:12:25+00:00","dateModified":"2024-04-05T07:22:03+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/"},"wordCount":1484,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/","url":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/","name":"Zo parse je Gutenberg content voor headless WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","datePublished":"2024-04-02T11:12:25+00:00","dateModified":"2024-04-05T07:22:03+00:00","description":"Leer hoe je geparste Gutenberg inhoud als HTML in je site kunt integreren met deze gedetailleerde handleiding. Het laat zien hoe je de inhoud in Next.js kunt gebruiken.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Zo parse je Gutenberg content voor headless WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=58991"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58991\/revisions"}],"predecessor-version":[{"id":59020,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58991\/revisions\/59020"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58991\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/58992"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=58991"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=58991"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=58991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}