Payload CMS 3 Has a Free API That Most Developers Dont Know About

#cms #nextjs #api #webdev

Payload CMS 3 now runs inside Next.js as a plugin, giving you a full headless CMS with auto-generated REST and GraphQL APIs inside your Next.js app.

Setup

npx create-payload-app@latest

Collection Config

// collections/Posts.ts
import { CollectionConfig } from "payload";

export 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: "author", type: "relationship", relationTo: "users" },
    { name: "status", type: "select", options: ["draft", "published"] },
    { name: "publishedAt", type: "date" },
    { name: "featuredImage", type: "upload", relationTo: "media" }
  ]
};

Auto-Generated REST API

GET    /api/posts              # List all
GET    /api/posts/:id          # Get one
POST   /api/posts              # Create
PATCH  /api/posts/:id          # Update
DELETE /api/posts/:id          # Delete

Local API (Server-Side)

// Inside Next.js Server Components or API routes
import { getPayloadClient } from "payload";

const payload = await getPayloadClient();
const posts = await payload.find({
  collection: "posts",
  where: { status: { equals: "published" } },
  sort: "-publishedAt",
  limit: 10
});