Next.js 前台
生成公开页面，读取已发布内容，并处理访客评论提交。
PROJECT STORY · 2026
从零搭建
个人 CMS
一个从手写后台出发，最终由 Next.js 前台与 NocoBase 后台共同完成的内容管理系统。这里记录的不只是结果，还有每个选择背后的原因。
生产环境运行中
- 前台
- Next.js 15
- 后台
- NocoBase 2.2
- 数据
- MySQL 8.4
- 入口
- Cloudflare
2个线上入口
3类核心数据
6个架构图表
1套完整闭环
01 · SYSTEM
系统如何协作
前台负责展示，后台负责管理，API 负责连接，数据库负责保存。职责分开后，修改文章不再需要改代码。
NocoBase 后台
让管理员通过表格和表单维护资料、文章与审核状态。
MySQL 数据库
持久保存资料、文章、评论及它们之间的关联关系。
Cloudflare
提供 HTTPS 公网入口，应用和数据库端口不直接暴露。
02 · EVIDENCE
动态获取，不是写死
NocoBase 中保存的正文是“1”，前台刷新后显示同样内容并更新日期。这组对应证据证明前台读取的是后台当前数据。
01NocoBase 修改
02保存到数据库
03前台重新请求
04展示最新内容
查看后台功能验收截图
03 · UNDERSTAND
不是背定义，而是看职责
这些词描述的不是同一个维度。点击每组概念，查看它们在本项目中的实际位置。
04 · JOURNEY
从想法到上线
项目经历了调研、手写、迁移和上线。保留第一版不是浪费，它帮助我理解后来交给 NocoBase 的每项能力。
- 01
理解问题
调研 CMS 与 WordPress
先明确内容管理系统为什么存在，以及公开网站与管理界面的区别。 - 02
建立基础
手写第一版 CMS
使用 Next.js、Prisma 和 MySQL 实现文章、登录、软删除和评论审核。 - 03
调整架构
迁移到 NocoBase
建立集合、导入数据、配置最小权限 API Token，并让前台切换数据源。 - 04
形成闭环
完成评论审核
访客提交 PENDING 评论，管理员审核后，前台只展示 APPROVED 内容。 - 05
生产交付
Docker 与 Cloudflare 上线
双域名 HTTPS、数据库备份、部署手册和验收清单全部完成。
05 · DECISIONS
关键选择与收获
先完成闭环，再增加功能
能新增文章不等于 CMS 完成。只有读取、发布、评论和审核都实际走通，才算交付。
权限比“接口能用”更重要
公开网站使用独立的最小权限 Token，不能借用管理员权限，也不能直接批准评论。
数据卷不等于备份
容器数据持久化只能防止普通重建丢失；生产数据仍需独立导出并异地保存。
LIVE RESULT