← all blogs

September 12, 2026 · updated September 15, 2026

Content Collections in Astro 7

A quick tour of typed MDX collections with the glob loader and render().

  • astro
  • mdx
  • typescript

Astro’s content layer gives you typed, validated content with almost no boilerplate.

Define the collection

import { defineCollection } from "astro:content";
import { glob } from "astro/loaders";
import { z } from "astro/zod";

const blog = defineCollection({
  loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
  }),
});

Point a glob() loader at a directory and every file becomes an entry with an auto-generated id.

Render an entry

---
import { getCollection, render } from "astro:content";
const posts = await getCollection("blog");
const { Content, headings } = await render(posts[0]);
---
<Content />

Why it matters

  • Frontmatter is validated at build time — a typo fails the build, not the page.
  • getCollection() returns fully typed objects, so autocomplete just works.
  • Static output means zero runtime cost for readers.

That is the whole engine behind this blog.