Building Pages with Blocks

What Are Blocks?

Blocks are reusable content sections defined in cms.config.ts. Instead of writing everything in a single richtext field, you compose pages from structured blocks like:

• Hero — headline, description, call-to-action buttons
• Features — grid of feature cards with icons
• CTA — call-to-action banner with button

How Blocks Work

In your cms.config.ts, define blocks with defineBlock():

defineBlock({
  name: 'hero',
  label: 'Hero Section',
  fields: [
    { name: 'tagline', type: 'text', required: true },
    { name: 'description', type: 'textarea' },
  ],
})

Then use them in a collection field:

{ name: 'sections', type: 'blocks', blocks: ['hero', 'features', 'cta'] }

Rendering Blocks in Next.js

The BlockRenderer component maps each block type to a React component:

switch (block._block) {
  case 'hero': return <HeroBlock block={block} />;
  case 'features': return <FeaturesBlock block={block} />;
  case 'cta': return <CtaBlock block={block} />;
}

Each block type gets its own component with Tailwind styles.