Type-safe MDX with the App Router

Give frontmatter a schema

Parse frontmatter once at build time and validate it against a schema. If a post is missing a required field, the build should fail loudly — not the page.

const PostMeta = z.object({
  title: z.string(),
  date: z.string(),
  tags: z.array(z.string()),
  published: z.boolean().default(true),
});

Let the types flow to the page

Once content is validated, the inferred type travels with it into your components. Your blog index knows exactly which fields exist, and so does your editor.

Treat content like data. Data has a shape, and shapes can be checked.