Nicht jedes Headless CMS ist gleich. Während viele Systeme auf Datenbankmodelle setzen, die man aus traditionellen CMSen kennt, verfolgt Sanity einen radikal anderen Ansatz: Inhalte werden als strukturierter Graph im so genannten Content Lake gespeichert und können über eine eigene Abfragesprache namens GROQ präzise abgerufen werden. Hinzu kommt ein vollständig anpassbares Bearbeitungsinterface – das Sanity Studio. Dieser Ansatz macht Sanity besonders für anspruchsvolle Redaktionsworkflows und komplexe Content-Architekturen attraktiv.
Was ist Sanity?
Sanity ist ein API-first Headless CMS, das 2017 gegründet wurde und sich seitdem zu einer der gefragtesten Lösungen für strukturiertes Content Management entwickelt hat. Im Gegensatz zu anderen Systemen ist das Sanity Studio kein mitgeliefertes Backend, das man startet und benutzt – es ist eine React-Anwendung, die sich im eigenen Projekt lebt und vollständig im Code konfiguriert wird. Das erlaubt eine beispiellose Anpassbarkeit, erfordert aber auch JavaScript-Kenntnisse für die Einrichtung.
Der Content Lake
Alle Inhalte in Sanity werden in der Cloud-Infrastruktur von Sanity gespeichert – dem sogenannten Content Lake. Dokumente liegen als JSON-Objekte mit einer eindeutigen ID und einem definierten Typen vor. Jede Änderung wird als Mutation versioniert gespeichert, was Echtzeit-Kollaboration und Konfliktauflösung ermöglicht. Der Content Lake ist von der Studio-Anwendung vollständig getrennt – das Studio ist lediglich ein Client, der über die APIs liest und schreibt.
Sanity Studio: Vollständige Anpassbarkeit im Code
Das Sanity Studio wird in einem JavaScript- oder TypeScript-Projekt über eine sanity.config.ts Datei konfiguriert. Schemas werden als Objektstrukturen definiert, nicht über eine grafische Oberfläche. Das ist für Entwickler ein großer Vorteil: Schemas liegen im Git-Repository, lassen sich reviewen, versionieren und automatisiert testen. Entwickler können eigene Input-Komponenten, benutzerdefinierte Views, Dashboard-Widgets und vollständige Workflows in React implementieren.
Der Studio kann entweder eigenständig deployed werden oder – seit Sanity Studio v3 – direkt in Next.js, Remix oder andere Frameworks eingebettet werden. Unter /studio ist das Interface dann Teil der Webanwendung selbst.
defineField- und defineType-Hilfsfunktionen aus dem Sanity-Paket für vollständige TypeScript-Typsicherheit bei der Schema-Definition. Mit sanity typegen generate lassen sich daraus automatisch TypeScript-Typen für deine Abfragen ableiten.
GROQ: Die Abfragesprache von Sanity
GROQ (Graph-Relational Object Queries) ist eine von Sanity entwickelte Abfragesprache, die speziell für den Zugriff auf JSON-Dokumente entworfen wurde. Sie ist deutlich ausdrucksstärker als REST-Query-Parameter und bietet im Vergleich zu GraphQL eine flachere Lernkurve für einfache Abfragen.
Ein einfaches GROQ-Beispiel, das alle veröffentlichten Artikel mit Titel und Slug abruft:
*[_type == "article" && !(_id in path("drafts.**"))] { title, slug }
GROQ unterstützt Filterung, Projektion (nur bestimmte Felder auswählen), Sortierung, Pagination, Joins über Referenzen, bedingte Felder und sogar einfache Berechnungen. Auf groq.dev gibt es eine interaktive Lernumgebung für GROQ.
Portable Text
Für Rich-Text-Inhalte setzt Sanity auf Portable Text – ein offener Standard für die Repräsentation strukturierter Text-Inhalte als JSON. Anstatt HTML zu speichern, wird der Inhalt als serialisierbarer Datenbaum abgelegt. Das bedeutet: Dieselben Textinhalte können in HTML, Markdown, natürliche Sprache oder jedes andere Format umgewandelt werden. Eigene Block-Typen, Annotationen und Inline-Objekte lassen sich problemlos einfügen.
Echtzeit-Kollaboration
Sanity unterstützt echte Echtzeit-Kollaboration: Mehrere Redakteure können gleichzeitig an demselben Dokument arbeiten, Änderungen werden live synchronisiert und Konflikte automatisch aufgelöst. Live-Cursors zeigen an, wer gerade welches Feld bearbeitet. Dieses Feature ist besonders für größere Redaktionsteams relevant und unterscheidet Sanity von Systemen, die Dokumente beim Öffnen sperren.
Integration mit Next.js
Sanity hat eine besonders enge Integration mit Next.js. Das offiziell empfohlene Setup verwendet next-sanity für die Client-Konfiguration und die Unterstützung des Live Preview-Modus. Mit dem Visual Editing Feature können Redakteure Inhalte direkt auf der Live-Website bearbeiten, ohne zwischen Studio und Vorschau hin- und herzuwechseln. Der Sanity Studio läuft dabei im selben Next.js-Projekt unter einer Route wie /studio.
Vergleich: Sanity vs. Contentful vs. Storyblok vs. Strapi
| Merkmal | Sanity | Contentful | Storyblok | Strapi |
|---|---|---|---|---|
| Preismodell | Pay-as-you-go + Pläne | Pläne ab ~$300/Monat | Pläne ab $99/Monat | Open Source / Cloud ab $29 |
| Kostenloser Tier | Ja (großzügig: 3 Nutzer, 10K Dok.) | Ja (sehr limitiert) | Ja (Community) | Trial (14 Tage) |
| Self-Hosting | Nein (Content Lake ist Cloud) | Nein | Nein | Ja (vollständig) |
| Abfragesprache | GROQ + GraphQL + REST | REST + GraphQL | REST + GraphQL | REST + GraphQL |
| Studio-Anpassung | Sehr hoch (React-Code) | Begrenzt | Mittel (Visual Editor) | Mittel (Plugins) |
| Echtzeit-Kollaboration | Ja | Begrenzt | Ja | Nein |
Wann ist Sanity die richtige Wahl?
Sanity glänzt bei Projekten, die eine sehr spezifische redaktionelle Erfahrung benötigen und bei denen Entwickler das Studio maßgeschneidert an den Workflow der Redaktion anpassen wollen. Die GROQ-Abfragesprache reduziert die Anzahl der notwendigen API-Aufrufe erheblich. Der großzügige kostenlose Tier macht Sanity auch für kleinere Projekte und Agenturen attraktiv. Wer dagegen vollständige Datenkontrolle und Self-Hosting benötigt, sollte andere Optionen prüfen.
FAQ
- Muss ich für Sanity zahlen?
- Der Free-Tier von Sanity ist für viele Projekte ausreichend: bis zu 3 Nutzer, 10.000 Dokumente, 500 GB CDN-Bandbreite pro Monat und unbegrenzte API-Anfragen. Kostenpflichtige Pläne beginnen bei Growth ab etwa $15 pro Nutzer und Monat.
- Was ist der Unterschied zwischen GROQ und GraphQL?
- Beide sind Abfragesprachen, unterscheiden sich aber in Konzept und Syntax. GROQ ist speziell für JSON-Dokumente entwickelt und erlaubt sehr freie, ausdrucksstarke Abfragen ohne vordefiniertes Schema auf der API-Ebene. GraphQL erfordert ein strikt typisiertes Schema. GROQ hat eine geringere Einstiegshürde, ist aber weniger standardisiert als GraphQL.
- Kann das Sanity Studio lokal betrieben werden?
- Ja, das Sanity Studio ist eine React-Anwendung, die lokal ausgeführt wird. Die Daten selbst liegen jedoch immer im Sanity Content Lake in der Cloud. Das Studio ist lediglich ein Client – die eigentliche Datenhaltung ist nicht lokal verfügbar.
- Wie gut ist die Next.js-Integration?
- Sanity und Next.js gelten als besonders gut aufeinander abgestimmt. Das
next-sanity-Paket bietet Live Preview, Visual Editing und optimiertes Fetching für den App Router. Viele offizielle Starter-Templates und Dokumentationsbeispiele verwenden Next.js.