Payload: The Open-Source TypeScript Headless CMS Built on Next.js
An open-source spotlight on Payload, the fullstack TypeScript headless CMS that installs in your Next.js /app folder, with code-first config, auth, a React admin, and REST, GraphQL plus a Local API. Independent project by the Payload team, not by Navanem, though navanem.com runs on it.
by Payload · spotlight by navanem
View source on GitHubTL;DR
- Payload is the open-source, fullstack Next.js framework and headless CMS, written in TypeScript, that installs inside your
/appfolder and gives you a backend plus an admin panel out of the box. - This is an independent open-source project by the Payload team, NOT by Navanem. We feature it as a community spotlight, and we build navanem.com on Payload, so this comes from first-hand use. All credit goes to its authors.
- Key features: code-first config, automatic TypeScript types, auth out of the box, granular access control, a customizable React admin, the Lexical rich text editor, and REST, GraphQL, plus a Local API for React Server Components.
- Start with
pnpx create-payload-app@latest(new users: the-t websitetemplate), and deploy serverlessly to Vercel or Cloudflare in one click.
What is Payload?
Payload describes itself as the first-ever Next.js native CMS that can install directly in your existing /app folder. It is both an app framework and a headless CMS, so you can combine frontend and backend in one folder and query your database inside React Server Components, without reaching for REST or GraphQL first.
The pitch is that you avoid signing up for yet another SaaS: Payload is open source with no vendor lock-in, both the admin and the backend are 100% extensible, you get full TypeScript with automatic types, and you can deploy anywhere, including serverlessly on Vercel for free.
A note on this page: Payload is an independent open-source project created and maintained by the Payload team (the payloadcms organisation on GitHub), NOT by Navanem. We feature it here as an open-source spotlight, and navanem.com itself runs on Payload. All credit goes to its authors. If you find it useful, please star and support the project on GitHub.
How does code-first config and TypeScript work?
Payload is configured in code, not through a hosted dashboard, and it is fully TypeScript with automatic types generated for your data. You define your collections and fields in config, and Payload surfaces those shapes as types across your app, so your frontend and backend share one source of truth. The field system is the core of that config: it ships a block-based layout builder, conditional field logic, and document and field-level hooks for every action Payload provides.
What do the admin panel and the APIs give me?
The admin is a customizable React admin panel, and because Payload is Next.js native you can use server components to extend the UI. It includes the Lexical rich text editor, versions and drafts, and localization. On the data side you get three APIs: REST, GraphQL, and a Local API that the project highlights for React Server Components, querying your database directly with no need for REST or GraphQL. Payload also provides auth out of the box and granular access control, and the README states the stack is highly secure thanks to HTTP-only cookies, CSRF protection, and more.
How do I start a project and self-host it?
After installing the required software, scaffold a project with pnpx create-payload-app@latest. New users should reach for the website template (-t website), which the team says shows how to do everything, including custom rich text blocks, on-demand revalidation, and live preview, with a Tailwind frontend in one /app folder. For hosting, the README documents one-click serverless deploys on Cloudflare (Workers, R2, D1) and Vercel (Next.js, Neon, Vercel Blob), and says you can deploy anywhere. There are also production-ready templates for websites and ecommerce.
Why feature Payload?
We feature Payload because it is the open-source stack we actually ship on. navanem.com runs on Payload, so the points above are not secondhand: config-as-code, the Local API in server components, the React admin, and the hooks are the parts we use daily. It is a genuinely open project with no vendor lock-in, the kind this site likes to spotlight.
FAQ
Is Payload made by Navanem?
No. Payload is an independent open-source project by the Payload team (the payloadcms organisation on GitHub), released under the MIT license. navanem.com is built with it, but Navanem did not create Payload and claims no ownership of it. The source lives at github.com/payloadcms/payload.
Is Payload free and open source?
Yes. The README states Payload is completely free and open-source, and the repository is MIT licensed. Part of the pitch is that you do not sign up for yet another SaaS and there is no vendor lock-in.
Do I still need a separate REST or GraphQL layer?
Not necessarily. Payload exposes REST and GraphQL APIs, but it also ships a Local API that queries your database directly in React Server Components, so server-rendered reads skip the network round trip.
Where do I get it?
From GitHub at github.com/payloadcms/payload, or scaffold a new project with pnpx create-payload-app@latest. Full documentation is on the Payload website.