WordPress + Next.js 搭建静态博客教程

为什么选择这种方式？

WordPress 作为内容管理系统非常成熟，Next.js 可以生成静态页面，两者结合可以兼顾易用性和性能。

架构原理

WordPress 提供 REST API，Next.js 从 API 获取数据并生成静态页面。用户访问的是静态 HTML，加载速度更快，而且不直接暴露 WordPress 后台，更安全。

搭建步骤

1. 准备 WordPress

安装 WordPress 并配置好REST API。确保 https://yourdomain.com/wp-json/wp/v2/posts 可以访问。

2. 创建 Next.js 项目

运行以下命令创建项目：

npx create-next-app@latest my-blog --js

3. 修改首页代码

在 pages/index.js 中添加获取 WordPress 文章的代码：

export async function getStaticProps() {
  const res = await fetch('https://yourdomain.com/wp-json/wp/v2/posts?per_page=10');
  const posts = await res.json();
  return { props: { posts } };
}

4. 构建静态页面

npm run build

增量更新

使用 ISR（Incremental Static Regeneration）实现增量更新：

return {
  props: { posts },
  revalidate: 1800, // 30分钟更新一次
};

部署

构建完成后，可以部署到 Vercel、Netlify 或任何静态托管服务。

总结

WordPress + Next.js 的组合既保留了 WordPress 的易用性，又获得了静态站点的性能优势，是搭建博客的好选择。