Content Collection in Astro: What It Is and How It Works

In Astro, a content collection is a way to organize and manage groups of content files like markdown or MDX in a structured manner. It lets you define schemas for your content and easily query and render this content in your site.

How It Works

Think of a content collection in Astro like a digital filing cabinet where you keep related documents together. Each collection holds content files such as blog posts, project descriptions, or documentation pages. You define a schema that acts like a form template, specifying what fields each content file should have, such as title, date, or tags.

When you build your site, Astro reads these content files, validates them against the schema, and makes them available as data you can use in your pages. This system helps keep your content organized and consistent, making it easy to display lists of posts or filter content by categories.

Example

This example shows how to define a blog posts collection with a schema and how to fetch and display the posts in an Astro component.

astro

import { defineCollection, z } from 'astro:content';

// Define a blog posts collection schema
const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.string(),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = {
  blog: blogCollection,
};

---

---
<script setup lang="ts">
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
</script>

<ul>
  {posts.map(post => (
    <li key={post.id}>
      <strong>{post.data.title}</strong> - {post.data.date}
    </li>
  ))}
</ul>

Output

<ul><li><strong>My First Post</strong> - 2024-06-01</li><li><strong>Another Post</strong> - 2024-06-15</li></ul>

When to Use

Use content collections in Astro when you want to manage structured content like blogs, documentation, or portfolios. They are perfect for sites where content changes often and needs to be organized with metadata like dates, tags, or authors.

For example, if you run a blog, you can store each post as a markdown file in a collection, then easily list and filter posts by date or category on your site. This approach keeps your content and code clean and scalable.

Key Points

• Content collections group related content files with a defined schema.
• They help keep content organized, consistent, and easy to query.
• Ideal for blogs, docs, portfolios, or any content-driven site.
• Astro validates content against schemas for reliability.
• Content can be fetched and rendered dynamically in components.

Key Takeaways

Content collections organize and structure content files in Astro.

Schemas define the shape and metadata of each content item.

They simplify querying and rendering content in your site.

Use them for blogs, documentation, portfolios, and similar sites.

Astro ensures content validity and consistency with schemas.