Een Next.js Marketingwebsite Bouwen Met een Headless CMS

Je marketingteam wil elke twee weken de hero-tekst van de homepage bijwerken om berichtgeving te testen. Op dit moment betekent dat een ontwikkelaar die een JSX-bestand bewerkt, een pull request opent en wacht op een deployment. Met een headless CMS en een Next.js frontend kan het marketingteam die wijziging in vijf minuten doorvoeren zonder een ticket in te dienen.

Het contentschema ontwerpen

Begin met je contentmodel voordat je frontend-code schrijft. Een marketingwebsite heeft doorgaans een handvol contenttypes nodig: pagina's (met composeerbare sectiebouwstenen), blogposts, teamleden en casestudies. In ContentGrid definieer je deze schema's met veldtypen — tekst, rich text, afbeelding, referentie, boolean — en de TypeScript SDK genereert de bijbehorende interfaces automatisch.

Modelleer voor een composeerbare paginastructuur elke sectie als een apart contenttype (HeroSection, FeatureGrid, Testimonials) en maak een Page-type dat een reeks referenties naar deze sectietypes bevat. Dit laat redacteuren pagina's bouwen uit herbruikbare bouwstenen zonder de codebase aan te raken.

Content ophalen in Next.js

Gebruik ContentGrids TypeScript SDK in je Next.js data-ophaaflaag. Met de App Router kun je content ophalen in Server Components en volledige TypeScript-typedekking krijgen:

• Paginametadata (titel, beschrijving) vanuit het CMS, weergegeven in de Next.js metadata-API
• Hero- en sectiecontent opgehaald op paginaniveau met één GraphQL-query
• Blogpostlijsten en detailpagina's met dynamische routes via generateStaticParams
• On-demand revalidatie getriggerd door ContentGrid-webhooks wanneer redacteuren wijzigingen publiceren

Webhooks verbinden met Vercel

Stel een webhook in ContentGrid in die vuurt bij content-publicatiegebeurtenissen. Wijs hem toe aan een Next.js API-route die revalidatePath of revalidateTag aanroept. Dit geeft je ISR-gedrag (Incremental Static Regeneration) — pagina's worden statisch gegenereerd maar worden binnen enkele seconden na een contentwijziging bijgewerkt, zonder een volledige site-herbouw.

Voeg in je Vercel-dashboard de ContentGrid API-sleutel toe als omgevingsvariabele. Je Next.js-app leest hem server-side voor data-ophalen, en hij wordt nooit meegestuurd naar de client-bundel.

Meertalige marketingwebsites

Als je marketingwebsite EN- en NL-versies nodig heeft (of andere taalversies), verwerkt ContentGrids meertalige ondersteuning dit op veldniveau. Configureer Next.js i18n-routering om hiermee overeen te komen, en haal taalspecifieke content op via de taalcode uit de URL. ContentGrid retourneert de juiste taalversie voor elk API-verzoek.

• Gebruik Next.js middleware om te redirecten op basis van browservoorkeur voor taal
• Sla taalspecifieke slugs op in ContentGrid als afzonderlijke slug-velden per taal
• Gebruik hreflang-metatags gegenereerd vanuit je CMS-data voor SEO

Het resultaat is een marketingwebsite die je team in dagen kunt shippen, in minuten kunt bijwerken en kunt onderhouden zonder ontwikkelaarsbottlenecks bij elke kopijwijziging.