Was ist die Astro Content Layer API?

Ab Astro 5 gibt es eine neue Art, Content-Sammlungen zu definieren: statt src/content/<name>/ mit impliziter Typisierung nutzt du explizite loader-Funktionen und defineCollection mit Zod-Schemas.

Schritt 1: src/content/config.ts anlegen

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

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    draft: z.boolean().optional().default(false),
  }),
});

export const collections = { blog };

Schritt 2: Ersten Artikel erstellen

Lege src/content/blog/erster-artikel.md an:

---
title: "Mein erster Artikel"
description: "Ein Test."
pubDate: 2026-01-01
draft: false
---

Inhalt hier.

Schritt 3: Dynamische Route anlegen

Erstelle src/pages/blog/[slug].astro:

---
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const entries = await getCollection('blog', ({ data }) => !data.draft);
  return entries.map((entry) => ({
    params: { slug: entry.id },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content } = await render(entry);
---

<h1>{entry.data.title}</h1>
<Content />

Häufige Fehler

  • entry.slug existiert in Astro 5 nicht – verwende entry.id
  • Stale Cache: Bei 404 in Dev-Modus .astro/ löschen und neu starten
  • render() kommt aus astro:content, nicht aus dem Entry selbst