Payload CMS — Open Source Fullstack Next.js Headless CMS

What it is

Payload is an open-source, fullstack Next.js framework that gives you an instant backend with a headless CMS, admin panel, authentication, file uploads, and more, all configured in TypeScript code. Unlike traditional CMS platforms that are GUI-configured, Payload uses a code-first approach where your content schema is your source of truth.

Version 3.0 is built directly into Next.js, eliminating the traditional backend/frontend separation. MIT licensed.

How it saves time or tokens

Payload generates the entire admin UI and API from your TypeScript configuration. Define a collection with fields, and Payload gives you a CRUD admin panel, REST API, GraphQL API, access control, and hooks without writing any frontend or API code. Built-in authentication with email/password, magic links, and OAuth removes the need for a separate auth system. Version history and draft/publish workflow are included, not add-ons.

How to use

1. Create a new Payload project:

npx create-payload-app@latest my-project
cd my-project
npm run dev

1. Open http://localhost:3000/admin, create your admin user, and start building.

1. Define a collection in your Payload config:

import { CollectionConfig } from 'payload';

const Posts: CollectionConfig = {
  slug: 'posts',
  admin: { useAsTitle: 'title' },
  access: {
    read: () => true,
    create: ({ req }) => !!req.user,
  },
  fields: [
    { name: 'title', type: 'text', required: true },
    { name: 'content', type: 'richText' },
    { name: 'status', type: 'select',
      options: ['draft', 'published'] },
    { name: 'author', type: 'relationship',
      relationTo: 'users' },
  ],
};

Example

Using Payload's Local API in a Next.js page:

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',
    limit: 10,
  });

  return (
    <div>
      {posts.docs.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  );
}

Related on TokRepo

• Coding tools — More fullstack frameworks on TokRepo.
• Content tools — Browse CMS and content management tools.

Common pitfalls

• Running Payload with SQLite in production causes performance issues with concurrent users. Use PostgreSQL or MongoDB for production.
• Not configuring access control on collections exposes data publicly. Define read/create/update/delete access functions for every collection.
• Overusing richText fields when structured fields (text, number, select) would be better. Structured fields enable typed queries and validation.