Waarom Headless CMS Rich Text Opslaat als Gestructureerde JSON, Niet als HTML

Je bouwt een blogpostpagina in Next.js. Je CMS geeft body-content terug als een HTML-string: <p>Hier wat tekst</p><h2>Een kop</h2>. Je injecteert het met dangerouslySetInnerHTML. Het werkt, maar nu wordt je kopstijl bepaald door een globale CSS-klasse, niet je componentsysteem. Je kunt geen aangepaste ankerlink toevoegen aan elke kop. Je kunt interne links niet onderscheppen om Next.js Link te gebruiken. De HTML-string is een zwarte doos.

Waarom Gestructureerde JSON Beter Is

ContentGrid slaat rich text op als een documentboom — een JSON-object met knooppunten, elk met een type en optionele markeringen. Een kop ziet er zo uit: {"type": "heading", "level": 2, "content": [{"type": "text", "value": "Een kop"}]}. Je frontend ontvangt de structuur, niet de gerenderde uitvoer. Jij beslist hoe elk knooptype mapt naar een React-component.

Dit is belangrijk omdat het ontwerpsysteem van je frontend de rendering beheert. Een h2 in je blogpost moet je Heading-component gebruiken met de juiste grootte, lettergerwicht en anker-ID. Een interne link moet Next.js Link gebruiken voor client-side navigatie. Een codeblok moet je syntaxismarkeerstift gebruiken. Niets daarvan is mogelijk wanneer het CMS pre-gerenderde HTML teruggeeft.

Een Rich-Text-Renderer Bouwen

• Maak een RichText-component op het hoogste niveau die het document-JSON accepteert en elk knooptype mapt naar een component.
• Verwerk tekstmarkeringen (vet, cursief, code) als wrapper-elementen binnen tekstknooppunten.
• Onderschep link-knooppunten om te controleren of de URL intern is — zo ja, gebruik Next.js Link; zo niet, render een standaard anker met target='_blank'.
• Render embedded entries (afbeeldingen, callout-blokken, embedded contenttypes) als volledige React-componenten, geen HTML-strings.

ContentGrid's TypeScript SDK exporteert de documentknooppunttypen zodat je renderer volledig getypeerd kan zijn. Elke tak van je switch-statement heeft een TypeScript-type om bij te passen.

Embedded Entries als Rich-Text-knooppunten

Een van de nuttigste functies van gestructureerde rich text is ondersteuning voor embedded entries. Je kunt een CodeExample-entry, een ProductCallout-entry of een VideoEmbed-entry inline embedden in body-content. ContentGrid neemt die op als knooppunten in het JSON-document, opgelost met de velden van de entry. Je renderer mapt het embedded entry-type naar de juiste React-component, waardoor complexe interactieve elementen buiten de editor blijven terwijl contentmakers ze toch contextueel kunnen plaatsen.

Het resultaat is rich text dat zo flexibel is als je componentbibliotheek toestaat, zonder ook maar één dangerouslySetInnerHTML in zicht.