De uitdaging
De website van Duwijckpark vertegenwoordigt een gemengd regionaal bedrijventerrein en de vereniging erachter. Naast algemene informatie publiceert ze een gids met meer dan dertig bedrijven, afzonderlijke bedrijfsprofielen, vacatures, nieuwsartikels, contactgegevens en gedeelde faciliteiten. Die inhoud moet actueel kunnen blijven zonder voor elk bedrijf of artikel een codewijziging uit te voeren.
De bestaande Next.js-applicatie bewaarde redactionele data lokaal. De modernisering moest die verantwoordelijkheid naar een beheerd contentsysteem verplaatsen en tegelijk de publieke URL’s behouden die bezoekers en zoekmachines al kenden.
Content naar een headless CMS brengen
David herwerkte de applicatie rond het headless CMS van BlokNotes. Bedrijfs- en blogpagina’s halen gepubliceerde inhoud voortaan op via een getypeerde API-laag, terwijl de website verantwoordelijk blijft voor presentatie, navigatie en metadata. Lijst- en detailaanvragen gebruiken incremental static regeneration met een verversingsvenster van zestig seconden. Zo blijven pagina’s snel en verschijnen redactionele updates tijdig.
Runtime-schema’s valideren CMS-antwoorden voordat ze de UI bereiken. Specifieke mappers zetten veldnamen, datums, afbeeldingen, vacaturegegevens en contactdetails om naar stabiele websitemodellen. Previewautorisatie is beschikbaar tijdens lokale ontwikkeling, maar wordt bewust niet aan productiecode in de browser blootgesteld.
Flexibele gestructureerde content
Een eigen blockrenderer vertaalt het CMS-documentmodel naar toegankelijke React-output. Hij ondersteunt titels, paragrafen, citaten, links, lijsten, afbeeldingen, code en andere gestructureerde elementen, inclusief geneste inhoud. Niet-ondersteunde blokken worden veilig overgeslagen. Platte tekst of Markdown biedt een leesbare fallback wanneer gestructureerde content ontbreekt.
Dankzij deze grens kunnen redacteurs rijkere bedrijfs- en blogpagina’s samenstellen zonder de website aan elk detail van de CMS-payload te koppelen. Afbeeldingsvelden worden vóór rendering beperkt tot de goedgekeurde assethost en absolute HTTPS-URL’s.
Routes behouden tijdens de overgang
De migratie behandelt bestaande zoekzichtbaarheid als een functionele vereiste. Een routebestand onder bronbeheer registreert eerder geïndexeerde bedrijven en artikels. Hernoemde bedrijfsslugs krijgen permanente redirects, terwijl oude numerieke blogidentifiers naar hun bestaande beschrijvende URL’s worden vertaald.
De sitemap wordt opgebouwd uit zowel statische routes als live gepubliceerde CMS-content. Een controlescript vergelijkt het CMS vóór een productierelease met het bestand van geïndexeerde routes en faalt wanneer een vereiste publieke slug ontbreekt. Detailpagina’s geven alleen een not-foundantwoord voor bevestigd ontbrekende content en verbergen zo geen fouten van de achterliggende service.
Communityflows en interactie
De responsieve Next.js-interface combineert een bedrijvengids, profielpagina’s, logocarrousel, vacaturemeldingen, nieuwsarchief, verenigingsinformatie, gegevens over het dienstencentrum en kaarten. Bedrijfsprofielen kunnen contactdetails, beelden, externe websites en vacaturelinks vanuit één contentmodel tonen.
Contact- en nieuwsbriefformulieren sturen rechtstreeks naar beheerde CMS-formulieren. Zod-validatie, verborgen honeypotvelden en duidelijke succes- of foutmeldingen maken die flows voorspelbaar. Umami registreert succesvolle interacties en performancemetingen zonder bezoekers te hinderen wanneer analytics niet beschikbaar is.
Resultaat
Duwijckpark kreeg een redactioneel beheerbare website zonder haar bestaande publieke structuur te verliezen. Contentbeheerders kunnen bedrijven en nieuws onafhankelijk bijwerken, terwijl de applicatie datacontracten, URL’s en renderkwaliteit bewaakt. Geautomatiseerde tests dekken paginering, mapping, contentblokken, formulieren en analytics en vormen zo een betrouwbaar vangnet voor verdere CMS- en interfacewijzigingen.