Payload CMS headless CMS toolkit including collections, fields, access control, authentication, custom components, and Local API operations. Use when building content management systems, creating admin interfaces, implementing role-based access control, developing custom React components, or integrating with Next.js applications.
Instrucciones de origen · Vista previa de solo lectura
name
payloadcms-3-82-1
description
Payload CMS headless CMS toolkit including collections, fields, access control, authentication, custom components, and Local API operations. Use when building content management systems, creating admin interfaces, implementing role-based access control, developing custom React components, or integrating with Next.js applications.
Payload is the open-source, fullstack Next.js framework that gives you instant backend superpowers. It installs directly into your existing /app folder, providing a full TypeScript backend and admin panel. Use it as a headless CMS or for building powerful applications. Payload 3.x replatformed the Admin Panel from a React Router SPA onto the Next.js App Router with full React Server Components support, completely separating core logic from HTTP and rendering layers.
Key capabilities:
Next.js native — runs inside your /app folder, no separate server
TypeScript-first — automatic type generation for all data models
Local API — query the database directly in server components without REST/GraphQL
Built-in auth — user management with JWT, API keys, and custom strategies
Versions and drafts — document versioning with autosave and scheduled publishing
Localization — multi-language content with fallback support
Lexical rich text editor — extensible WYSIWYG editor with custom features
Granular access control — collection, field, and document-level permissions
Extensive hooks system — document and field-level hooks for every operation
HTTP-only cookies, CSRF protection — enterprise-grade security by default
When to Use
Building a headless CMS with a customizable React admin panel
Creating content-driven websites with Next.js App Router
Implementing role-based access control with fine-grained permissions
Building applications that need built-in authentication and user management
Creating block-based page builders or content management interfaces
Integrating versioning, drafts, and scheduled publishing workflows
Working with multi-language content requiring localization
Extending the admin UI with custom React Server Components
Building REST APIs or GraphQL endpoints on top of typed data models
Core Concepts
Collections are the primary data model — similar to database tables. Each collection defines a slug, fields, access control, hooks, and admin UI configuration. Collections can enable authentication (auth: true), file uploads (), or versioning ().
upload: true
versions: { drafts: true }
Globals are singleton documents for site-wide content like headers, footers, and settings. Unlike collections, globals have no list view — only a single editable document.
Fields define the data shape within collections and globals. Payload supports text, number, email, textarea, code, date, point, radio, checkbox, select, richText, upload, relationship, join, group, row, tabs, collapsible, array, blocks, hidden, and json field types. Fields support validation, hooks, access control, localization, and conditional visibility.
Access Control operates at three levels: collection-level (create/read/update/delete), field-level (read/write per field), and document-level (returning a Where query to filter visible documents). Access functions receive the request context including the authenticated user.
Hooks run at every stage of the document lifecycle: beforeValidate, beforeChange, afterChange, beforeRead, afterRead, beforeDelete, afterDelete, and field-level hooks (beforeValidate, beforeChange, afterChange, afterRead, beforeDuplicate). Hooks can transform data, enforce business rules, trigger side effects, and integrate with external services.
The Payload Config (payload.config.ts) is the central configuration file defining collections, globals, database adapter, admin panel settings, plugins, custom endpoints, email adapter, localization, and more. It uses buildConfig() from the payload package.
Collections and Fields: Deep dive into all field types, validation, relationships, joins, blocks, arrays, and rich text configuration → Collections and Fields
Access Control and Authentication: Role-based permissions, custom auth strategies, API keys, JWT configuration, and field-level access → Access Control and Authentication
Hooks and Lifecycle: Document hooks, field hooks, before/after operation patterns, and integration with external services → Hooks and Lifecycle
Local API and Queries: The Where query system, depth/population, select/projection, pagination, sorting, joins, and transactions → Local API and Queries
Versions, Drafts, and Localization: Document versioning, autosave drafts, scheduled publishing, multi-language content, and fallback locales → Versions Drafts and Localization
Admin Panel Customization: Custom React components, views, tabs, live preview, dashboard widgets, and theme configuration → Admin Panel Customization
Database Adapters and Plugins: MongoDB, Postgres, SQLite, Drizzle ORM adapter patterns, storage adapters, and official plugins → Database Adapters and Plugins
