Payload CMS

Overview

Payload CMS is a code-first headless CMS where collections and fields are defined in TypeScript, auto-generating an admin panel, REST/GraphQL APIs, and TypeScript types. It supports PostgreSQL, MongoDB, and SQLite, and integrates directly into Next.js applications with the Local API.

Instructions

• When defining collections, create TypeScript config objects with slug, fields, access, and hooks, using field types like text, richText, relationship, upload, array, group, and blocks.
• When setting access control, use function-based permissions at the collection, field, and operation level (create, read, update, delete), and create reusable access functions like isLoggedIn and isAdmin.
• When building flexible pages, use blocks field type so editors compose pages from predefined block types, and define reusable field groups as functions for DRY configuration across collections.
• When managing content workflows, enable versions with versions: { drafts: true } for draft/published states and full revision history.
• When integrating with Next.js, use @payloadcms/next to run Payload inside the Next.js app, and use the Local API (payload.find(), payload.create()) in Server Components for typed, fast access without HTTP.
• When customizing the admin panel, replace specific components with custom React, add custom views for new pages, and configure live preview for real-time frontend content previewing.
• When building reusable content structures, use relationships over manual ID references for auto-resolution and validation, and define singleton globals for site settings, navigation, and footer.

Examples

Example 1: Build a blog CMS with Next.js