企业官网建设流程全解析

Payload CMS：装进 Next.js /app 文件夹的 CMS

Payload 在 GitHub 上已经拿到 43K Star 了。

它是第一个能直接装进 Next.js/app文件夹的 CMS。不用单独部署后端，不用折腾 API 对接，Payload 就是你项目里的一个包。

1、这玩意儿解决什么问题

传统 CMS 的老毛病：前端一个项目，后端一个项目，中间靠 API 连着。

每次改个字段，前端要调接口，后端要改模型，两边联调半天。CMS 部署在别的地方，还得管 CORS、管鉴权、管网络延迟。想在 React Server Components 里直接查数据库？做不到，因为 CMS 根本不在你的 Next.js 项目里。

Payload 把这些全砍掉了。它装在你的/app文件夹里，Admin 面板和后端 API 跑在同一个 Next.js 进程中。Server Components 可以直接查数据库，不需要 REST 也不需要 GraphQL。

2、部署方式

支持一键部署到 Vercel 和 Cloudflare。Vercel 那条线绑定了 Next.js 前端、Neon 数据库和 Vercel Blob 存储。Cloudflare 那条线用 Workers 跑计算、R2 存文件、D1 做全球复制数据库。

当然也可以部署到自己的服务器上，没有任何锁定。

3、能做什么

Payload 提供了一套现成的模板：网站、电商、博客、Portfolio。这些模板用 React Server Components 和 Tailwind 构建，可以直接拿来改。

底层能力方面：完整 TypeScript 支持，数据类型自动生成。内置身份认证。版本控制和草稿。多语言本地化。区块式布局构建器。可定制的 React Admin 面板。Lexical 富文本编辑器。条件字段逻辑。精细到字段级别的访问控制。每个操作都有文档和字段级 Hook。API 性能好，安全性靠 HTTP-only Cookie 和 CSRF 保护。

插件体系也已经成型，官方和社区都有可用的插件，可以按需扩展功能。

4、快速开始

pnpx create-payload-app@latest-twebsite

一条命令，装出来就是一个完整的项目，前端后端都在同一个/app文件夹里。可以直接部署，也可以在上面改。

对于已经在用 Next.js 的团队来说，Payload 的价值很直接：不需要再引入一套独立的 CMS，它就是你 Next.js 项目的一部分。

值很直接：不需要再引入一套独立的 CMS，它就是你 Next.js 项目的一部分。