Auto-Generating TypeScript Types from Your CMS Schema

You added a new field to a content type in ContentGrid, forgot to update the TypeScript interface, and spent forty minutes debugging why a component was showing undefined. Auto-generating types from the schema prevents this entirely. The types are always in sync because they come from the same source of truth as your content.

Installing the ContentGrid CLI and SDK

Install the CLI and TypeScript SDK in your Next.js project:

• Run npm install @contentgrid/cli @contentgrid/sdk --save-dev.
• Add your ContentGrid API key to .env.local as CONTENTGRID_API_KEY.
• Add your space ID as CONTENTGRID_SPACE_ID.
• Make sure .env.local is in your .gitignore.

The CLI reads these environment variables automatically, so no additional configuration file is needed for basic usage.

Running the Type Generator

Run the following command from your project root:

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

This fetches your schema from the ContentGrid API and writes a TypeScript file with one interface per content type. Reference fields are typed as Reference<T> where T is the referenced content type. Rich text fields return a typed rich text object. Array fields are typed as arrays of their item type.

The generated file also exports a union type of all content type IDs, which is useful for generic fetching utilities.

Adding Type Generation to Your Build

Add a generate script to your package.json and run it before your build:

• Add "generate": "contentgrid types generate --output src/types/contentgrid.ts" to scripts.
• Update your build script to "npm run generate && next build".
• In your CI pipeline (GitHub Actions, Vercel build command), this runs automatically before every deployment.
• Commit the generated file to version control so your IDE has types available without running the generator locally.

Using the Types in Your Next.js Components

Import the generated types in your data-fetching functions:

• Type your fetch function return values with the generated interfaces.
• Use the types in getStaticProps, generateStaticParams, or React Server Component functions.
• Pass typed props down to components — TypeScript will catch any field access on removed or renamed fields at compile time.

The real value shows up when a content editor renames a field in ContentGrid. Your next build runs the generator, the type changes, TypeScript throws an error pointing to every place that field is used, and you fix them before anything reaches production. That feedback loop — schema change to type error to fix — is what makes auto-generated types worth the setup time.