Payload

At a Glance:

Payload is a Next.js native, open-source headless CMS and app framework that installs directly into your existing /app folder, allows you to query your database in React Server Components, and deploys serverlessly on platforms like Vercel and Cloudflare.

Overview:

Payload is an open-source headless CMS and application framework built natively for Next.js. It installs directly into a project's existing /app folder, combining the admin panel and backend with the frontend codebase. Developers can query the database directly inside React Server Components without needing a REST or GraphQL API. The project is deployable serverlessly via one-click setups on Vercel and Cloudflare, which bundle the CMS with specified database and file storage services. Production-ready website and ecommerce templates are provided to jumpstart projects. Payload targets Next.js developers who want a tightly integrated, TypeScript-based content management layer without signing up for an external SaaS service.

Key Decision Points:

• Deployment model: Deployable serverlessly in one click on Vercel or Cloudflare, with bundled database and storage options such as Neon, Vercel Blob, Cloudflare Workers, R2, and D1.

• Integration architecture: Installs directly into your existing Next.js /app folder, allowing the admin panel and backend to coexist with the frontend code.

• Data access pattern: Queries the database directly in React Server Components, eliminating the need for a separate REST or GraphQL API layer.

• Extensibility: Both the admin interface and backend are described as 100% extensible, with a plugin system for adding or removing functionality.

• Starting experience: Provides production-ready templates for websites and ecommerce stores, built with React Server Components and Tailwind.

Core Features:

• Next.js native installation: Installs directly into a Next.js /app folder, serving as both a CMS and app framework within the same project structure.

• Database queries in server components: Query your database directly in React Server Components without relying on REST or GraphQL endpoints.

• Granular Access Control: Provides extremely granular access control over admin panel and API operations.

• Block-based layout builder: Includes a block-based layout builder for constructing content structures.

• Document and field-level hooks: Offers hooks for every action Payload provides, allowing custom logic at the document and field level.

• Lexical rich text editor: Incorporates the Lexical rich text editor for content authoring.

Use Cases:

• Developers building Next.js websites who want to manage content without connecting to an external headless CMS service.

• Projects that benefit from co-locating the content management backend and frontend in a single /app folder for serverless deployment on Vercel or Cloudflare.

• Teams using React Server Components who want to access and render CMS content through direct database queries instead of an API layer.

• Developers starting ecommerce projects who need a pre-built, production-ready template integrated with a headless CMS.

Open-Source Alternative Value:

Payload is released as a free, open-source CMS, providing a self-contained alternative to SaaS headless CMS platforms. It eliminates the need to sign up for an external service by allowing developers to run the entire CMS from their own Next.js application. The codebase can be deployed serverlessly on infrastructure like Vercel or Cloudflare, combining the admin backend with the frontend in one project structure. Its plugin system and extensible admin UI allow developers to adapt the CMS to specific project requirements without being restricted by a closed-source vendor's feature set.