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.