Headless CMS Marketing Site. Fast, editable, sane.

The split

Decide which pages live in MDX and which live in Sanity, by ownership. If a marketer owns the page and edits it more than once a quarter, it lives in Sanity. Otherwise it stays in MDX.

In practice this usually means: home page, key landing pages, case studies, and blog posts in Sanity. About, pricing structure, FAQs, legal pages in MDX. The exact split is per project.

MDX setup

MDX content lives under `content/<section>/<slug>.mdx` and is statically rendered at build time. Frontmatter supplies metadata. A small typed loader exposes content to pages.

// lib/content.ts
import { readFile, readdir } from 'node:fs/promises'
import matter from 'gray-matter'
import { compileMDX } from 'next-mdx-remote/rsc'

export async function loadDoc(section: string, slug: string) {
  const raw = await readFile(`content/${section}/${slug}.mdx`, 'utf8')
  const { data, content } = matter(raw)
  const { content: mdx } = await compileMDX({ source: content })
  return { meta: data, body: mdx }
}

Sanity setup

Sanity is configured with a tight schema — no &ldquo;flexible page builder&rdquo; nonsense. Every editable page has a defined schema with a fixed set of fields. This keeps editing fast for marketers and prevents the layout from drifting.

// sanity/schemas/case-study.ts
export const caseStudy = {
  name: 'caseStudy',
  type: 'document',
  fields: [
    { name: 'title', type: 'string', validation: r => r.required() },
    { name: 'slug', type: 'slug', options: { source: 'title' } },
    { name: 'industry', type: 'string' },
    { name: 'summary', type: 'text', rows: 3 },
    { name: 'body', type: 'array', of: [{ type: 'block' }] },
    { name: 'metrics', type: 'array', of: [{ type: 'metric' }] },
  ],
}

On-demand revalidation

Sanity webhook fires on publish. A Next.js route revalidates the affected paths. Marketing publishes; the site reflects the change inside seconds.

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache'

export async function POST(req: Request) {
  const secret = req.headers.get('x-sanity-secret')
  if (secret !== process.env.SANITY_REVALIDATE_SECRET) {
    return new Response('unauthorised', { status: 401 })
  }
  const { _type, slug } = await req.json()
  if (_type === 'caseStudy') revalidatePath(`/work/${slug}`)
  revalidateTag(_type)
  return Response.json({ ok: true })
}

Performance and SEO

• →Static rendering by default; ISR only on Sanity-backed pages
• →next/image for every image, with width/height to prevent layout shift
• →Open Graph image generation via next/og for blog and case-study pages
• →Sitemap and robots.txt generated from a single source of truth
• →Lighthouse 100 / 100 / 100 / 100 should be the baseline, not the goal