Manage your sites rich content in your codebase with content-collections and MDX

Traditionally, rich content like blog posts, documentation, or marketing pages is managed in a separate CMS (Content Management System).
But what if you want to keep your content close to your code and manage it with tools you already use, like Git?

This is where content-collections and MDX come in.

• MDX lets you write Markdown with embedded React components.
• content-collections is a library that takes your markdown files, validates them against a schema, and turns them into type-safe data collections.

It's a powerful combination that provides a Git-based CMS. You can manage your content as simple files in your codebase, just like your code.

Here's a simple setup for content-collections:

// content-collections.ts
import { defineCollection, defineConfig } from "@content-collections/core";
import { z } from "zod";
 
const posts = defineCollection({
    name: "posts",
    directory: "content/posts",
    schema: (p) =>
        z.object({
            title: z.string(),
            date: z.string().transform((d) => new Date(d)),
            summary: z.string(),
        }),
});
 
export default defineConfig({
    collections: [posts],
});

Usually you integrate content-collections with your framework of choice (e.g. Next.js), so that you content generation is part of the build or development process.

Then you can access your content directly in your Next.js app with full type completion:

import { allPosts } from "content-collections";
 
export function BlogPage () {
    return (<div>
        {allPosts.map((post) => (
            <div key={post.path}>
                <h2>{post.title}</h2>
            </div>
        ))}
    </div>)
}

The process:

• Define your content structure using a Zod schema.
• Create your content in the content/posts directory.
• Run content-collections generate to create type-safe data.
• Access your content directly in your Next.js app with full type completion.

You can do all kinds of powerful things like in MDX like rich-text content or integrating React components for interactive elements.

This approach is perfect for blogs, documentation, or static sites where you want a fast, developer-friendly workflow without an external database or API.

For a more detailed explanation, you can check the official documentation.