⚡CMS

Sanity CMS für Content

Das flexibelste Headless CMS — April 2026

Sanity ist ein Headless CMS mit Echtzeit-Collaboration, einem wahnsinnig flexiblen Schema-System und Visual Editing direkt auf deiner Website. Das Content-Team kann live editieren während Entwickler volle Kontrolle über die Datenstruktur behalten.

Pro-Tip — Der schnelle Weg
Sanity hat GROQ — eine eigene Query-Sprache die viel intuitiver ist als GraphQL für Content-Abfragen.
Seite 1
01

Sanity Projekt einrichten

Erstelle ein Sanity Studio das als Route in deiner Next.js App läuft.

npm install sanity next-sanity @sanity/image-url
npx sanity@latest init


# Wähle: Embedded Studio (Next.js)
# Das erstellt:
# sanity.config.ts — Studio Konfiguration
# sanity/schemas/ — Content Schemas
# app/studio/[[...tool]]/page.tsx — Studio Route
02

Content Schema definieren

Definiere dein Schema in TypeScript — Sanity generiert daraus das Editor-UI.

// sanity/schemas/post.ts
export default {
 name: "post",
 title: "Blog Post",
 type: "document",
 fields: [
 { name: "title", title: "Titel", type: "string",
 validation: (Rule: any) => Rule.required() },
 { name: "slug", type: "slug", options: { source: "title" } },
 { name: "body", title: "Inhalt", type: "array",
 of: [{ type: "block" }, { type: "image" }] },
 { name: "publishedAt", type: "datetime" },
 ],
};
03

Content mit GROQ abfragen

Nutze GROQ Queries um Content typsicher in deinen Pages zu laden.

// lib/sanity.ts
import { createClient } from "next-sanity";


export const client = createClient({
 projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
 dataset: "production",
 apiVersion: "2026-04-01",
 useCdn: true,
});


// app/blog/page.tsx
export default async function BlogPage() {
 const posts = await client.fetch(
 `*[_type == "post"] | order(publishedAt desc) {
 title, "slug": slug.current, publishedAt
 }`
 );
 return posts.map((p: any) => <article key={p.slug}>{p.title}</article>);
}
Seite 2
Warum das funktioniert
  • GROQ Queries holen genau die Daten die du brauchst — kein Over-Fetching
  • Visual Editing macht Content-Pflege intuitiv für Nicht-Techniker
  • Echtzeit-Collaboration verhindert Konflikte bei mehreren Redakteuren
  • Flexibles Schema: verschachtelte Objekte, Referenzen und Custom Types ohne Limits
Tipps
  • GROQ ist mächtiger als REST und einfacher als GraphQL für Content-Queries
  • Visual Editing: Content-Redakteure klicken direkt auf der Live-Seite und editieren
  • Echtzeit-Collaboration: mehrere Redakteure können gleichzeitig am gleichen Dokument arbeiten
  • Sanity Free Tier: 100k API Requests pro Tag und 10GB Assets kostenlos
  • Portable Text für Rich Content: flexibler als Markdown, strukturierter als HTML
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen