用 Next.js 搭一个 Headless WordPress 博客

为什么选择 Headless 架构

传统 WordPress 是前后端一体的主题渲染，速度和安全都需要额外调优。Headless 方案把 WordPress 只当作「内容编辑后台」，由 Next.js 负责页面渲染，好处是：

• 页面静态化，首屏快；
• 前后端独立部署，互不拖累；
• 写文章依然是熟悉的 Gutenberg 编辑器。

数据层怎么接

我选择 WPGraphQL 插件暴露 GraphQL 接口，理由是可以一次查询出文章、分类、标签、封面图，避免 REST API 的 N+1 请求。

query PostBySlug($slug: ID!) {
  post(id: $slug, idType: SLUG) {
    title
    content
    date
    categories { nodes { name slug } }
  }
}

缓存的取舍

第一版先用 ISR：设置 revalidate 时间，文章发布后最多延迟 N 分钟自动更新，不上复杂的 Webhook 重新验证。

能用简单方案解决的事，就不要一开始就引入复杂基础设施。

小结

整体链路是：WordPress + WPGraphQL → Next.js 数据层 → 静态页面。开发体验和最终性能都不错，值得一试。