我用 AI 做了一个 WordPress 迁移到 Next.js 的工具链

2026/05/10

一、为什么会做这个工具链

最近做了一个小工具链，名字叫 wp-next-public。

它的目标很简单：把 WordPress 站点文章迁移到 Next.js 项目里，同时尽量保留 WordPress 后台的内容管理体验。

说人话就是：内容还是可以在 WordPress 后台写，但前台展示可以交给 Next.js。

我之前一直觉得 WordPress 好用，但它也很重。如果只是写文章、维护页面、做官网内容，WordPress 后台确实方便，运营或者编辑人员也比较熟悉它，不需要额外学习一套新系统。

但前台如果继续完全依赖 WordPress，就会遇到一些问题：页面性能和现代前端体验不太好控制；想做组件化、静态生成、缓存和部署时比较别扭；多个站点复用内容和模板时，维护成本也会变高。

所以能不能让 WordPress 只负责内容，Next.js 负责前台展示，这其实就是 Headless WordPress 的思路。

二、这个项目拆成了三个包

最后我把它拆成了三个 npm 包：

@wp-next-public/core
@wp-next-public/react
@wp-next-public/cli

@wp-next-public/core

@wp-next-public/core 负责和 WordPress 数据打交道。

比如 WordPress REST API 请求、文章/页面/分类/标签等类型定义、HMAC 签名相关能力，以及内容同步时需要的一些基础工具。

它更像底层能力层。

@wp-next-public/react

@wp-next-public/react 负责在 React / Next.js 里渲染 WordPress 内容。

WordPress 的正文通常是一段 HTML。直接 dangerouslySetInnerHTML 当然也能显示，但真实项目里会遇到很多细节：图片要处理，链接要处理，代码块要处理，HTML 也需要清理，避免安全问题。

所以这里封装了一个 ContentRenderer，并支持 processor 管道。

import {
  ContentRenderer,
  imageProcessor,
  codeProcessor,
  linkProcessor,
} from '@wp-next-public/react';

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <ContentRenderer
        html={post.content}
        processors={[imageProcessor, codeProcessor, linkProcessor]}
      />
    </article>
  );
}

@wp-next-public/cli

@wp-next-public/cli 是最接近用户使用的一层。

现在支持几个命令：

wp-next init
wp-next pull
wp-next sync

最开始我想对标的是 create-next-app 的体验。

npx @wp-next-public/cli init --url=https://your-wp-site.com --output ./my-blog

执行之后，它会生成一个 Next.js 项目骨架，里面包含 WordPress 客户端、文章/页面/分类/标签路由、.env.example、/api/wp-next/webhook 接收器和基础 README。

三、AI 在里面做了什么

这个项目不是我手写完所有代码后再让 AI 润色一下，而是我把 AI 当成一个开发助手参与整个过程。我主要负责定方向、拆功能、判断哪些代码要保留、哪些要清理，以及最后验证生成结果。

AI 比较适合做的是快速生成初版结构、补测试、写 GitHub Actions、生成文档草稿、处理重复模板代码，以及帮我检查包发布配置。但我发现它不能替代判断。

比如一个工具链到底应该拆成几个包，哪些功能现在该做，哪些功能应该先放弃，这些还是要自己决定。AI 很容易把项目做大。如果不控制范围，它会一直补功能，最后项目看起来很完整，但其实不好维护。所以后面我做了一次清理，把非必要代码删掉，只保留公开版需要的核心能力。

四、现在做到什么程度

目前这个项目已经完成了一个比较小但完整的闭环：

  1. GitHub 仓库整理好了
  2. 三个 npm 包已经发布
  3. 文档站部署到了 GitHub Pages
  4. GitHub Actions 会自动跑代码质量检查
  5. 本地验证过可以用 CLI 生成项目
  6. GitHub Release 也补上了

文档地址是：

https://biancaplus.github.io/wp-next-public/

npm 包是：

@wp-next-public/core
@wp-next-public/react
@wp-next-public/cli

从结果上看，它已经不是一个纯 demo。至少它具备了一个开源工具项目该有的基础东西：README、文档、CI、npm 包和 Release。

五、做完之后的一点感受

这个项目让我更明显地感觉到，AI 做项目时最重要的不是“让它写代码”，而是“让它在一个清楚的边界里写代码”。

如果边界不清楚，它会把一个小工具写成大平台。如果边界清楚，它就能帮你很快把重复工作做完。

我一开始想做的是 WordPress 到 Next.js 的迁移工具。做到后面，我反而更关注这些问题：

  1. 包结构是不是清楚
  2. 用户能不能一条命令开始
  3. 文档是不是能看懂
  4. npm 包能不能正常安装
  5. CI 能不能兜住基本质量
  6. 这个项目能不能作为作品展示

这些东西不一定比业务功能复杂，但它们决定了一个项目看起来是不是完整。

六、后面还会不会继续做

当前阶段的目标已经达到了：利用 AI 辅助做出了一个 WordPress 迁移到 Next.js 的工具链，并且把它整理成了一个可以公开访问、可以安装、可以展示的项目。

短期内应该不会继续大改。如果以后继续做，可能会补更完整的 WordPress connector 插件、更真实的示例站点、CLI 的端到端测试、更多 WordPress 页面构建器内容适配，以及更完整的迁移指南。

泰斯