跳到主要内容

用 Next.js 60 秒搭建博客

想要 带 SSR SEO 的 Next.js 博客、真正的 CMS 后台与 Headless API — 又不想花几周拼 Strapi + 自研 Admin + 博客 starter?

ReactPress 就是为此准备的。一条 CLI 即可拉起:

  • Next.js 访客站(SSR/ISR、sitemap、OG)
  • Web Admin 写 Markdown 文章
  • 也可 Headless 使用的 NestJS API
  • 可选 插件(SEO meta、摘要、图片优化)

从安装到本地栈就绪,通常约 60 秒

前置条件

  • Node.js 18+(建议 LTS)
  • npm / pnpm / yarn
  • 一个空目录

不需要 Docker。默认数据库为嵌入式 SQLite

第 1 步 — 安装 CLI(约 15 秒)

npm i -g @fecommunity/reactpress@beta

包地址:@fecommunity/reactpress

第 2 步 — 初始化博客(约 45 秒)

mkdir my-nextjs-blog && cd my-nextjs-blog
reactpress init

init 会生成配置、启动 API + Admin + 主题,并打印地址:

界面地址
Next.js 博客(访客)http://localhost:3001
管理后台http://localhost:3001/admin/
APIhttp://localhost:3002/api
健康检查http://localhost:3002/api/health

第 3 步 — 登录并启用主题

  1. 打开 http://localhost:3001/admin/
  2. 登录:admin / admin请立即修改密码
  3. 外观 → 主题 → 安装 reactpress-theme-starter(或 hello-world)→ 启用
  4. 刷新 http://localhost:3001 — Next.js 博客已就绪
生产密码

切勿把默认账号带上线。部署前在 Admin 中更新账户,或配置 ADMIN_USER / ADMIN_PASSWD

第 4 步 — 发布第一篇文章

  1. 文章 → 新建
  2. 标题 + Markdown 正文
  3. 可选分类 / 标签
  4. 发布
  5. http://localhost:3001 查看

更多界面说明:5 分钟创建第一个站点 · 如何创建第一篇博客

为什么这是真正的 Next.js 博客(不是静态演示)

能力开箱即用
SSR / ISR官方主题用 Next.js 做访客 SEO
CMS 编辑Admin 管理文章、页面、媒体、评论
SEO主题 sitemap / OG + SEO 插件按文章配置 meta
Headless/api/article 与 toolkit SDK,对接自定义 React 应用
换肤npm catalog — 保留 Admin,替换前端

自定义主题:主题开发 · starter:reactpress-theme-starter

可选 — 验证 API 与 Headless

curl http://localhost:3002/api/health
# {"status":"ok"}

从其他 React 应用或 fork 主题消费内容:Headless API 指南

快速排错

reactpress doctor
reactpress logs --follow
reactpress stop # 需要时停止后重新 init

完整清单:故障排查

接下来通常做什么

目标指南
理解整体ReactPress 是什么? · 核心概念
生产 SEO站点设置与 SEO
部署上线生产环境部署 · Docker
对比 WordPressReactPress vs WordPress
自托管清单面向 React 的自托管 CMS

常见问题

访客站真的是 Next.js 吗?
是。官方主题是 Next.js 应用;Admin 是挂在 /admin/ 下的独立 Vite SPA。

可以保留自己的 Next.js 应用吗?
可以。对接 Headless API,或 fork 主题 starter,把 ReactPress 当 CMS。

必须用 Vercel 吗?
不必。本地 init 即可开始;生产可用任意 Node 主机、Docker 或自建流水线。

create-next-app + MDX 有何不同?
MDX starter 适合纯 Git 内容。当非开发者也要发文时,ReactPress 提供 Admin、媒体、评论、插件与 Headless API。

博客延伸阅读