Payload CMS - Next.js 原生 CMS

什么是 Payload CMS？

Payload CMS 是第一个可以直接运行在 Next.js /app 目录的 CMS。它既是应用框架，也是 Headless CMS，让你可以拥有完整的 TypeScript 后端和管理面板。

核心理念：不再是” CMS + 你的 Next.js 应用”，而是” Payload 就是你的 Next.js 应用”。

安装

pnpx create-payload-app@latest

新手推荐使用 website 模板：

pnpx create-payload-app@latest -t website

核心概念：Collections

Collections 是 Payload 的核心，类似于传统数据库的表：

import { buildConfig } from 'payload';

export default buildConfig({
  collections: [
    {
      slug: 'posts',
      fields: [
        { name: 'title', type: 'text', required: true },
        { name: 'content', type: 'richText' },
        { name: 'publishedAt', type: 'date' },
        { name: 'author', type: 'relationship', relationTo: 'users' },
      ],
    },
    {
      slug: 'users',
      auth: true,
      fields: [
        { name: 'name', type: 'text' },
      ],
    },
  ],
});

字段类型

字段类型	说明
text	单行文本
richText	Lexical 富文本编辑器
number	数字
checkbox	布尔值
date	日期
relationship	关联（支持多对多）
blocks	Block 布局块
upload	文件/媒体上传

访问控制

const posts = {
  slug: 'posts',
  access: {
    read: () => true, // 公开读取
    create: ({ req }) => req.user?.role === 'admin',
    update: ({ req, doc }) => req.user?.id === doc.author.id,
    delete: ({ req, doc }) => req.user?.role === 'admin',
  },
};

一键部署

平台	特点
Vercel	Next.js 前端 + Neon 数据库 + Vercel Blob
Cloudflare Workers	Workers + R2 + D1
自托管	Docker 或任意 Node.js 环境

最佳实践

1. 从 website 模板开始：包含所有功能的完整示例
2. 善用 Access Control：字段/文档级别的权限控制
3. Block 字段做布局：用 blocks 字段构建灵活的页面布局
4. 利用 Server Components：直接在组件里查询，无需 API 调用

参考

• GitHub: payloadcms/payload
• 官方文档: https://payloadcms.com/docs