⚡CMS

Payload CMS einrichten

Headless CMS das in deinem Next.js lebt — April 2026

Payload CMS ist das einzige Headless CMS das direkt in deiner Next.js App läuft — gleicher Server, gleiche Datenbank, null externe Services. Du definierst Collections in TypeScript und bekommst automatisch ein Admin-Panel, REST API und GraphQL.

Pro-Tip — Der schnelle Weg
Payload 3.0 läuft direkt als Next.js Plugin — kein separater CMS-Server nötig. Deine App und dein CMS teilen sich den gleichen Build.
Seite 1
01

Payload Projekt erstellen

Erstelle ein neues Projekt mit Payload und Next.js in einem.

npx create-payload-app@latest mein-cms


# Wähle:
# → Next.js Template
# → PostgreSQL (oder MongoDB)
# → TypeScript


cd mein-cms
npm run dev
# Admin Panel: http://localhost:3000/admin
02

Collection definieren

Erstelle eine Collection — das ist wie eine Datenbank-Tabelle mit automatischem Admin-UI.

// collections/Posts.ts
import type { CollectionConfig } from "payload";


export const Posts: CollectionConfig = {
 slug: "posts",
 admin: { useAsTitle: "title" },
 fields: [
 { name: "title", type: "text", required: true },
 { name: "content", type: "richText" },
 { name: "image", type: "upload", relationTo: "media" },
 { name: "status", type: "select",
 options: ["draft", "published"],
 defaultValue: "draft",
 },
 { name: "author", type: "relationship", relationTo: "users" },
 ],
};
03

Daten im Frontend abfragen

Nutze die lokale Payload API direkt in deinen Server Components — kein Fetch nötig.

// app/(frontend)/blog/page.tsx
import { getPayload } from "payload";
import config from "@payload-config";


export default async function BlogPage() {
 const payload = await getPayload({ config });
 const posts = await payload.find({
 collection: "posts",
 where: { status: { equals: "published" } },
 sort: "-createdAt",
 });
 return (
 <div>
 {posts.docs.map((post) => (
 <article key={post.id}>
 <h2>{post.title}</h2>
 </article>
 ))}
 </div>
 );
}
Seite 2
Warum das funktioniert
  • Kein externer CMS-Service: alles läuft in deiner Next.js App
  • TypeScript-native: Collections sind Code, nicht YAML oder JSON
  • Automatisches Admin-Panel: null eigenes UI für Content-Management bauen
  • Lokale API: Datenbank-Queries ohne HTTP-Overhead direkt in Server Components
Tipps
  • Payload generiert automatisch TypeScript-Typen für alle deine Collections
  • Rich Text Editor, Media Upload und Beziehungen sind eingebaut
  • Access Control auf Field-Level: definiere wer was sehen und bearbeiten darf
  • Hooks für Before/After Create, Update, Delete — wie Datenbank-Trigger
  • Payload Cloud für Hosting oder self-host auf deinem eigenen Server
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