Payload CMS 全栈框架上手指南:在 Next.js `/app` 目录中原生运行的 Headless CMS 与后端框架 Payload CMS 全栈框架上手指南在 Next.js/app目录中原生运行的 Headless CMS 与后端框架【免费下载链接】payloadPayload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.项目地址: https://gitcode.com/GitHub_Trending/pa/payloadPayload 是一个开源的、Next.js 原生的全栈应用框架它可以直接安装进你现有的/app目录同时扮演无头 CMS与应用框架两个角色让 TypeScript 后端、可视化后台和前端页面同处一个项目。本指南以仓库根目录 README.md 为骨架结合仓库内的官方文档、CLI 源码与模板实现带你掌握从零初始化、一键云部署、模板选型到核心功能落地认证、版本、本地化、富文本、权限、钩子的完整路径。什么是 Payload首个 Next.js 原生的 CMS按 README.md 的定位Payload 是首个可以直接安装进现有/app目录的 Next.js 原生 CMS官方称之为无头 CMS 的新时代开端。它本质上同时具备两种能力应用框架App Framework提供完整的 TypeScript 后端与数据层支持Auth、Versions/Drafts、Localization、Hooks、Access Control等后端能力无头 CMSHeadless CMS自带一套完全基于 React 的可视化后台Admin Panel并暴露 REST 与 GraphQL API。相比传统 CMSREADME 中直接对比的对象是旧式 WordPress 代码它提供的核心差异点包括能力维度说明前后端同仓前端与后端可以放在同一个/app目录下无需拆分部署免 SaaS 自托管完全开源无需为又一家 SaaS 付费没有供应商锁定React Server Components 查询直接在服务端组件中查询数据库不必经过 REST/GraphQL 再封装一层全量可扩展Admin 与后端都 100% 可扩展前后端均用组件化方式定制部署自由随处可部署含免费在 Vercel 上无服务器运行仓库的版本状态也可以佐证其技术栈核心包payload的 package.json 声明为 Node, React, Headless CMS and Application Framework built on Next.js并在关键字中列出 admin panel、graphQL、self hosted、next.js、typescript 等整个 monorepo 采用 pnpm workspace 组织见 pnpm-workspace.yaml核心包源码位于 packages/payload/src。快速开始用 create-payload-app 启动一个新项目先决条件在运行快速开始命令前官方安装文档 docs/getting-started/installation.mdx 列出了以下软件要求请先核对环境Node.js24.15.0及以上Next.js16.2.6及以上并非所有 Next.js 15/16 版本都兼容务必使用上述支持范围TypeScript6.0.3及以上旧版本不保证类型可用任一 JavaScript 包管理器pnpm、npm 或 yarn 2官方偏好 pnpmyarn 1.x 不被支持任一兼容数据库MongoDB、Postgres 或 SQLitedocs/database/overview.mdx 列出了完整的适配器列表。一条命令完成脚手架仓库根目录的 README.md 给出的快速开始命令为pnpx create-payload-applatest若想获得功能最全的起点README 建议直接使用 website 模板pnpx create-payload-applatest -t website运行后按交互提示即可得到一个新的、可运行的 Payload 项目目录。create-payload-app的本质是一个独立 CLI 包其源码位于 packages/create-payload-app使用说明见 packages/create-payload-app/README.md支持以下常用参数$ npx create-payload-app $ npx create-payload-app my-project $ npx create-payload-app -n my-project -t website OPTIONS -n my-payload-app 设置项目名 -t template_name 选择特定模板 --use-npm 用 npm 安装依赖 --use-yarn 用 yarn 安装依赖 --use-pnpm 用 pnpm 安装依赖 --no-deps 不安装任何依赖 -h 显示帮助可选模板包括blank空白模板、blank-tanstackTanStack Start 空白模板、website网站模板、ecommerce电商模板、pluginPayload 插件开发模板、payload-demo、payload-website等。此外当在已兼容的 Next.js、TanStack Start 或常规 TanStack Router 项目内不带项目名运行该 CLI 时它会把 Payload 直接初始化进当前项目纯 Router 项目会在确认后转换为 TanStack Start 项目——这一点与仓库中 packages/create-payload-app/src/commands.ts 导出的initNext、initTanStack两条初始化路径相互印证。在已有 Next.js 应用中手动安装如果你希望在既有项目中集成 Payload可以跳过脚手架手动安装官方流程见 docs/getting-started/installation.mdx核心分五步第 1 步安装依赖包。先安装核心运行时与 Next.js 集成层pnpm i payload payloadcms/next再按需安装可选包payloadcms/richtext-lexical富文本编辑器不用富文本可不装、sharp上传集合的图片缩放/裁剪/焦点仅在需要时、graphql仅在要用 GraphQL API 时。注意若使用 npm可能需要npm i --legacy-peer-deps。第 2 步安装数据库适配器三选一pnpm i payloadcms/db-mongodb # MongoDB pnpm i payloadcms/db-postgres # Postgres pnpm i payloadcms/db-sqlite # SQLite第 3 步把 Payload 所需文件放入/app。Payload 直接运行在 Next.js 的/app目录里你需要在其中放置一组位于(payload)路由组内的文件可参照空白模板templates/blank。这些文件只负责从payloadcms/next引入 REST/GraphQL API 与 Admin Panel安装后不需要再改动你自己的前端文件则放进自建的另一个路由组例如(my-app)、(frontend)、(app)目录名随意仅用于理清结构app/ ├─ (payload)/ │ └── // Payload 文件一次性放好不再改动 └─ (my-app)/ └── // 你的应用文件仓库 test/__helpers 与 templates/blank 中保留了大量该结构的实际实现可供对照本仓库根目录下的app/(payload)与app/(app)正是这套布局的活例子。第 4 步接入withPayload并创建配置。在next.config中包裹官方插件import { withPayload } from payloadcms/next/withPayload const nextConfig { // 你的 Next.js 配置 } export default withPayload(nextConfig)由于 Payload 是完整 ESM 项目withPayload是 ECMAScript 模块要么在package.json中加入type: module要么把 Next 配置文件名改为.mjs后缀并把其中所有require改为import。然后创建最小可用的payload.config.tsimport sharp from sharp import { lexicalEditor } from payloadcms/richtext-lexical import { mongooseAdapter } from payloadcms/db-mongodb import { buildConfig } from payload export default buildConfig({ editor: lexicalEditor(), // 富文本编辑器可选 collections: [], // 在此定义集合 secret: process.env.PAYLOAD_SECRET || , // 高复杂度、不可猜测的密钥 db: mongooseAdapter({ // 此处以 Mongoose 为例也可换 Postgres/SQLite url: process.env.DATABASE_URL || , }), sharp, // 上传图片裁剪/焦点可选 })随后在tsconfig.json中声明指向配置文件的路径别名{ compilerOptions: { paths: { payload-config: [./payload.config.ts] } } }第 5 步启动。运行pnpm dev或npm run dev访问http://localhost:3000/admin创建第一个 Payload 用户即可开始使用。一键部署Cloudflare Workers 与 Vercel 的无服务器方案README 明确提供了两种一键部署路径两者都基于无服务器架构、免去自建基础设施的繁琐Cloudflare完全自包含一键部署到Workers上传走R2数据库用全局复刻的 D1。仓库内对应的数据库适配器为 packages/db-d1-sqlite并有配套模板 templates/with-cloudflare-d1 可供参考。Vercel一体化方案一键部署Next.js前端配合Neon数据库与Vercel Blob媒体存储。对应存储适配器见 packages/storage-vercel-blob并参考模板 templates/with-vercel-website、templates/with-vercel-mongodb、templates/with-vercel-postgres。这也是 README 反复强调部署在无服务器环境也毫无障碍的能力基础——由于 Payload 构建在 Next.js 之上其路由、认证 Cookie 与数据库查询都以服务端可运行方式实现。模板中诸如 templates/with-cloudflare-d1、templates/with-postgres 均给出了真实的云环境配置样例动手前可以逐一对照。模板生态生产级全栈起点README 着重强调模板的价值这些是生产就绪、端到端的方案用于加速上线任何类型的网站、电商店铺、博客或作品集前端统一基于React Server Components与Tailwind构建。仓库根目录templates下实际维护了多套模板websitetemplates/websiteREADME 强烈推荐新手以此入门——它演示了一切自定义富文本块、按需重新验证on-demand revalidation、实时预览live preview等且自带基于 Tailwind 的前端全部放在同一个/app目录ecommercetemplates/ecommerce电商全栈模板blank / blank-tanstack空白与 TanStack Start 空白起点templates/blank、templates/blank-tanstackwith-cloudflare-d1 / with-postgres / with-vercel-mongodb / with-vercel-postgres / with-vercel-website面向特定部署目标见templates目录可直接作为云端/数据库配置参考。模板会持续扩充。除了官方模板社区还可以通过给仓库添加payload-templatetopic 让更多开发者发现自己的模板。示例目录从认证到多租户的完整范式除模板外仓库的 examples 目录还提供了一批可独立运行的示例覆盖多种集成方式。运行任意一个示例同样走 CLI 通道npx create-payload-app --example example_name仓库内实际收录的示例包括astro与 Astro 站点搭配、auth、custom-components、custom-server、draft-preview草稿与预览、email、form-builder表单构建器、live-preview实时预览、localization本地化多语言、multi-tenant多租户、remix、tailwind-shadcn-uiTailwind shadcn/ui与whitelabel白标等详见 examples。例如想学习认证与授权的最佳实践直接研读 examples/auth 下含登录、会话管理的完整工程想理解前端编写内容 后台实时预览的完整闭环参考 examples/live-preview其配套能力还沉淀为payloadcms/live-preview、payloadcms/live-preview-react、payloadcms/live-preview-vue三个官方包packages/live-preview 等。核心功能清单与底层依据README 的 Payload Features 是理解产品能力边界的重要索引下面把每一项映射到仓库内可直接查阅的源码与文档形成一条官方宣称 → 实现证据的对照链功能官方文档仓库实现/佐证内置认证 Authdocs/authentication/overview.mdxpackages/payload/src 内 auth 相关实现HTTP-only Cookie、JWT 等机制见 docs/authentication/cookies.mdx 与 docs/authentication/jwt.mdx版本与草稿 Versions/Draftsdocs/versions/overview.mdx支持自动保存docs/versions/autosave.mdx本地化 Localizationdocs/configuration/localization.mdx语言翻译包见 packages/translations基于 Block 的布局构建器docs/fields/blocks.mdx字段体系详见 docs/fields/overview.mdx含条件逻辑 conditional logic可定制的 React 后台docs/admin/overview.mdxUI 组件库位于 packages/ui扩展入口见 docs/custom-componentsLexical 富文本编辑器docs/fields/rich-text.mdx编辑器包 packages/richtext-lexical包含 500 源文件级别的功能实现细粒度访问控制docs/access-control/overview.mdx集合/字段/全局文档分层见 docs/access-control文档级与字段级钩子docs/hooks/overview.mdx覆盖 Payload 每一次操作细节见 docs/hooks/collections.mdx、docs/hooks/fields.mdxREADME 还强调在服务端组件中直接查询数据库无需 REST/GraphQL。这一点在实际工程中通过 REST APIdocs/rest-api/overview.mdx与 GraphQLdocs/graphql/overview.mdx之外的本地/直接查询能力实现类型安全则来自全 TypeScript 数据自动类型生成docs/typescript/generating-types.mdx。安全方面README 提到的 HTTP-only Cookie、CSRF 防护等更细内容可继续参考 docs/authentication/cookies.mdx 与 docs/production/preventing-abuse.mdx。插件生态按需扩展的官方与社区插件Payload 的可扩展性在插件系统上体现得最彻底——你可以安装插件来增删功能也可以开发并分发自己的插件为自己的仓库打上payload-plugintopic 方便他人发现。当前仓库 monorepo 内置了大量官方插件包见packages目录覆盖常见业务场景站点能力SEOpackages/plugin-seo、重定向packages/plugin-redirects、搜索packages/plugin-search、嵌套文档packages/plugin-nested-docs业务集成电商packages/plugin-ecommerce、Stripe 支付packages/plugin-stripe、表单构建器packages/plugin-form-builder、多租户packages/plugin-multi-tenant运维与工具导入导出packages/plugin-import-export、Sentry 错误监控packages/plugin-sentry、MCPModel Context Protocolpackages/plugin-mcp支持 AI 工具直接对接后台能力。配套的存储适配器packages/plugin-cloud-storage 及storage-s3、storage-azure、storage-gcs、storage-r2、storage-vercel-blob等与邮件适配器packages/email-nodemailer、packages/email-resend进一步扩大了开箱即用的范围。每类插件的接入文档与使用范式可在 docs/plugins 下按名查阅。迁移与文档地图如果你正从旧版本升级README 指向 v3 迁移指南仓库内的 docs/migration-guide 同时维护了 v3docs/migration-guide/v3.mdx与 v4docs/migration-guide/v4.mdx两套指南版本差异与破坏性变更可以在这里逐项核对。更完整的全量文档则以结构化 mdx 形式存放在 docs 目录涵盖配置docs/configuration、数据库docs/database、字段docs/fields、队列docs/jobs-queue、查询docs/queries、上传docs/upload、性能与生产部署docs/performance、docs/production等主题均可直接在仓库内翻阅。参与贡献与获取帮助贡献本仓库的贡献指南见 CONTRIBUTING.md同时仓库还维护了面向 AI 与开发者的协作说明AGENTS.md、CLAUDE.md示例与问题排查examples 提供大量可运行的集成示例遇到疑难可以先查阅 docs/troubleshooting/troubleshooting.mdx社区官方鼓励通过仓库 Discussions、Issues 以及 Discord 服务器交流README 明确表示你遇到的困难很可能别人已经解决过先检索再提问是最高效的方式。总而言之Payload 的定位可以一句话概括它是Next.js 原生的全栈 CMS 框架——要么用pnpx create-payload-applatest数秒内获得一个全新项目要么借助withPayload手动接入既有 Next.js 应用再按需选择模板、示例、官方插件与数据库/存储适配器组合出适合业务形态的架构。结合本仓库内随时可读的文档、源码与测试你完全有能力在理解其底层机制的前提下把它作为自身产品的长期技术底座。【免费下载链接】payloadPayload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.项目地址: https://gitcode.com/GitHub_Trending/pa/payload创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考