Payload CMS: Das Open-Source-CMS, das in Next.js lebt – und jetzt Figma gehört

Payload CMS: Das Open-Source-CMS, das direkt in Next.js lebt – und jetzt zu Figma gehört

Im April 2026 hat Figma die Übernahme von Payload CMS bekanntgegeben – ein Schritt, der die Grenzen zwischen Design-Tools und Content-Management endgültig auflöst. Aber was macht Payload so besonders, dass ein Design-Gigant wie Figma zugreift? Und was bedeutet das für Marketing-Teams, die ein zukunftssicheres CMS suchen?

---

Was ist Payload CMS?

Payload ist ein Open-Source, TypeScript-natives Headless CMS, das sich fundamental von Contentful, Sanity oder Strapi unterscheidet: Es lebt direkt in eurer Next.js-App – nicht daneben, nicht als separater Service, sondern als Teil eures Codebasis.

npx create-payload-app

Ein einziger Befehl und ihr habt ein vollständiges CMS mit Admin-Panel, API-Layer und Datenbank-Anbindung – alles in eurem bestehenden Next.js-Projekt.

Die Architektur im Vergleich

---

Warum Payload anders ist: Code-First, Content-First

1. Schema-Definition im Code

Statt Felder in einer GUI zusammenzuklicken, definiert ihr eure Content-Modelle in TypeScript:

// collections/BlogPosts.ts
import { CollectionConfig } from 'payload'

export const BlogPosts: CollectionConfig = {
  slug: 'blog-posts',
  admin: {
    useAsTitle: 'title',
  },
  fields: [
    { name: 'title', type: 'text', required: true },
    { name: 'content', type: 'richText' },
    { name: 'author', type: 'relationship', relationTo: 'authors' },
    { name: 'publishedAt', type: 'date' },
    { name: 'status', type: 'select', options: ['draft', 'published'] },
  ],
}

Vorteil: Eure Content-Modelle sind versioniert, review-fähig und Teil des CI/CD-Prozesses – kein „Wer hat das Feld gelöscht?"-Drama mehr.

2. Kein separater API-Layer

Da Payload in Next.js lebt, könnt ihr Content direkt im Server-Component laden:

// app/blog/[slug]/page.tsx
import { getPayload } from 'payload'

export default async function BlogPost({ params }) {
  const payload = await getPayload({ config })
  const post = await payload.find({
    collection: 'blog-posts',
    where: { slug: { equals: params.slug } },
  })
  
  return <article>{post.docs[0].content}</article>
}

Keine REST-API-Calls, kein GraphQL-Setup, keine Latenz durch externe Services.

3. Visual Editing mit Live Preview

Payload 3.0 bringt einen Visual Editor mit, der Content-Änderungen in Echtzeit auf der Live-Seite zeigt. Redakteure können direkt auf der Seite klicken und bearbeiten – ohne das Admin-Panel zu verlassen.

4. RAG & Vector Embeddings – KI-ready ab Werk

Ein Feature, das kein anderes CMS bietet: Payload generiert automatisch Vector Embeddings eures Contents. Das bedeutet:

• Semantische Suche über alle Inhalte
• RAG-fähige Chatbots auf Basis eurer eigenen Inhalte
• Personalisierung durch kontextuelle Content-Empfehlungen

---

Figma + Payload: Warum diese Übernahme alles verändert

Am 10. April 2026 verkündete Figma die Übernahme von Payload CMS. Die strategische Logik:

Design-to-Production Pipeline

Die Vision: Designer erstellen in Figma Layouts, die automatisch zu Payload-Collections werden. Content-Teams befüllen die Struktur. Entwickler deployen – alles in einer Pipeline.

Was das für Marketing-Teams bedeutet

1. Keine Vendor Lock-in: Payload ist MIT-lizenziert – euer Content gehört euch, eure Datenbank gehört euch
2. Reduktion von Tool-Silos: Design, Content und Code in einem Workflow
3. Enterprise-ready: Microsoft, US Air Force und Bugatti setzen bereits auf Payload
4. Kostenersparnis: Kein 300-$/Monat-SaaS-Abo für ein CMS, das ihr selbst hosten könnt

---

Payload vs. die Konkurrenz: Headless CMS Markt 2026

Contentful (SaaS-Leader)

• Stärken: Ausgereiftes Ökosystem, starke API, großes Partner-Netzwerk
• Schwächen: Teuer (Enterprise ab 750 $/Monat), Vendor Lock-in, keine eigene Datenbank
• Fazit: Gut für Enterprises, die nicht selbst hosten wollen – aber zunehmend unter Druck

Strapi (Open-Source-Veteran)

• Stärken: Große Community, Plugin-Ökosystem, selbst gehostet
• Schwächen: Kein nativer Visual Editor, kein Framework-Integration, v5 noch in Stabilisierung
• Fazit: Solide Wahl, aber Payload ist in der Developer Experience deutlich voraus

Sanity (Content Lake)

• Stärken: Flexible Datenstruktur, gute Echtzeit-Kollaboration, GROQ-Abfragesprache
• Schwächen: Proprietäre Infrastruktur, Preismodell skaliert schlecht, Learning Curve
• Fazit: Stark für redaktionelle Teams, aber teuer bei Skalierung

Payload (The New Standard?)

• Stärken: Next.js-nativ, TypeScript-first, MIT-Lizenz, KI-Features, Figma-Backing
• Schwächen: Nur Next.js (kein Remix, Astro, etc.), Self-Hosting erfordert DevOps-Know-how
• Fazit: Der stärkste Kandidat für Teams, die Next.js nutzen und Kontrolle über ihre Infrastruktur behalten wollen

---

Praxisbeispiel: Payload für eine Marketing-Website

Schritt 1: Projekt aufsetzen

npx create-payload-app@latest my-marketing-site
# Wählt: Next.js + PostgreSQL

Schritt 2: Landing Pages als Collection

export const LandingPages: CollectionConfig = {
  slug: 'landing-pages',
  fields: [
    { name: 'title', type: 'text', required: true },
    { name: 'hero', type: 'group', fields: [
      { name: 'headline', type: 'text' },
      { name: 'subline', type: 'textarea' },
      { name: 'cta', type: 'text' },
      { name: 'image', type: 'upload', relationTo: 'media' },
    ]},
    { name: 'sections', type: 'blocks', blocks: [
      TestimonialBlock,
      FeatureGridBlock,
      CTABlock,
    ]},
    { name: 'seo', type: 'group', fields: [
      { name: 'metaTitle', type: 'text' },
      { name: 'metaDescription', type: 'textarea' },
      { name: 'ogImage', type: 'upload', relationTo: 'media' },
    ]},
  ],
}

Schritt 3: Deploy auf Vercel

Payload läuft auf Vercel, Railway, Docker oder jedem Node.js-Host. Da es ein Next.js-App ist, funktioniert vercel deploy out-of-the-box.

---

Wer nutzt Payload bereits?

---

Fazit: Ist Payload das CMS der Zukunft?

Payload CMS trifft einen Nerv. In einer Welt, in der Marketing-Teams gleichzeitig mehr Content, mehr Personalisierung und mehr Geschwindigkeit brauchen, bietet es eine Architektur, die genau darauf ausgelegt ist:

1. Developer Experience: TypeScript-native, Code-first, keine Black-Box
2. Marketer Experience: Visual Editor, Live Preview, intuitive Admin-UI
3. KI-Readiness: RAG & Vector Embeddings out-of-the-box
4. Ownership: MIT-Lizenz, eigene Datenbank, kein Vendor Lock-in
5. Figma-Integration: Design-to-Production Pipeline in Sichtweite

Für Marketing-Teams, die Next.js nutzen (oder nutzen wollen), gibt es aktuell kein besseres CMS. Der Figma-Deal macht Payload noch relevanter – und könnte den gesamten Headless-CMS-Markt neu ordnen.

---

Weiterführende Ressourcen

• Payload CMS – Offizielle Website
• Payload 3.0 Announcement
• Figma übernimmt Payload
• Payload auf GitHub (30k+ Stars)
• Headless CMS Vergleich 2026 – Dev.to