TypeScript-types automatisch genereren vanuit je CMS-schema

Je hebt een nieuw veld toegevoegd aan een contenttype in ContentGrid, vergeten de TypeScript-interface bij te werken, en veertig minuten gedebugd waarom een component undefined toonde. Types automatisch genereren vanuit het schema voorkomt dit volledig. De types zijn altijd synchroon omdat ze uit dezelfde bron van waarheid komen als je content.

De ContentGrid CLI en SDK installeren

Installeer de CLI en TypeScript SDK in je Next.js-project:

• Voer npm install @contentgrid/cli @contentgrid/sdk --save-dev uit.
• Voeg je ContentGrid API-sleutel toe aan .env.local als CONTENTGRID_API_KEY.
• Voeg je space-ID toe als CONTENTGRID_SPACE_ID.
• Zorg dat .env.local in je .gitignore staat.

De CLI leest deze omgevingsvariabelen automatisch, dus voor basisgebruik is geen extra configuratiebestand nodig.

De typegenerator uitvoeren

Voer de volgende opdracht uit vanuit je projectroot:

• npx contentgrid types generate --output src/types/contentgrid.ts

Dit haalt je schema op uit de ContentGrid API en schrijft een TypeScript-bestand met één interface per contenttype. Referentievelden zijn getypeerd als Reference<T> waarbij T het gerefereerde contenttype is. Rich text-velden geven een getypeerd rich text-object terug. Arrayvelden zijn getypeerd als arrays van hun itemtype.

Het gegenereerde bestand exporteert ook een union-type van alle contenttype-ID's, wat handig is voor generieke fetch-utilities.

Typegeneratie toevoegen aan je build

Voeg een generate-script toe aan je package.json en voer het uit vóór je build:

• Voeg "generate": "contentgrid types generate --output src/types/contentgrid.ts" toe aan scripts.
• Werk je build-script bij naar "npm run generate && next build".
• In je CI-pipeline (GitHub Actions, Vercel build-opdracht) draait dit automatisch vóór elke deployment.
• Leg het gegenereerde bestand vast in versiebeheer zodat je IDE types beschikbaar heeft zonder de generator lokaal te hoeven uitvoeren.

De types gebruiken in je Next.js-componenten

Importeer de gegenereerde types in je data-fetch-functies:

• Typeer de returnwaarden van je fetch-functies met de gegenereerde interfaces.
• Gebruik de types in getStaticProps, generateStaticParams of React Server Component-functies.
• Geef getypeerde props door aan componenten — TypeScript signaleert bij compilatie elke veldtoegang op verwijderde of hernoemde velden.

De echte waarde wordt zichtbaar wanneer een contentredacteur een veld hernoemt in ContentGrid. Je volgende build voert de generator uit, het type wijzigt, TypeScript gooit een fout op elke plek waar dat veld wordt gebruikt, en je repareer het voordat er iets naar productie gaat. Die feedbackloop — schemawijziging naar typefout naar fix — is wat automatisch gegenereerde types de insteltijd waard maakt.