如何将WordPress用作Next.js的无头内容管理系统

根据 W3Techs 的数据，WordPress 已经存在了 20 多年，为互联网上 42.7% 的网站提供动力。在网站内容管理系统（CMS）方面，WordPress 也占据了 62.5% 的市场份额。

如今，许多编程语言和框架都可以用来构建用户友好的高性能网站，无论您在 WordPress 仪表板上做什么优化，它们的速度都比 WordPress 快得多。其中一个例子就是流行的 React 框架 Next.js。

本指南展示了如何将 WordPress 用作无头 CMS，为 Next.js 应用程序提供数据。它还介绍了如何将 Next.js 代码作为静态网站部署到静态网站托管服务器。

了解无头 WordPress

无头WordPress指的是只使用WordPress的后台功能（管理和存储内容），而使用单独的系统（如Next.js）来展示前端。

这种解耦允许开发人员使用 WordPress 强大的内容管理工具，同时充分利用现代前端开发功能，如 Next.js 中的服务器端渲染和静态网站生成。

准备您的 WordPress 网站

在进行 Next.js 开发之前，您的 WordPress 网站需要做一些准备工作，才能作为无头内容管理系统使用。

拥有 WordPress 网站后，有两种方法可以将数据从 WordPress CMS 获取到前端框架中： WPGraphQL 和 REST API。

REST API 便于使用 JavaScript 方法（如 Fetch API 或 Axios 库）以JSON格式检索数据。REST API从WordPress 4.7版本开始就内置于WordPress中，这意味着它不需要任何插件即可运行。但要使用 WPGraphQL（允许您使用 GraphQL 查询与 WordPress 数据交互），您必须安装 WPGraphQL 插件。

本指南将使用 REST API。要获取 JSON 格式的 WordPress 数据，请在 WordPress 网站 URL 中添加 /wp-json/wp/v2：

http://yoursite.com/wp-json/wp/v2

如果您在访问 http://yoursite.com/wp-json 时默认未启用 JSON API，您可以在 WordPress 面板的 “设置” 下打开 “固定链接“，然后选择 “文章名” 或除 “朴素” 之外的其他任一选项来启用它：

这适用于本地和公共 WordPress 网站，为包括文章、页面、评论和媒体在内的内容提供端点。

设置 Next.js 环境

Next.js 可帮助开发人员轻松构建网络应用程序，提高性能并优化开发体验。它的主要功能之一是基于文件的路由，可简化路由的创建。

此外，Next.js 还非常注重性能，提供了自动代码拆分等功能，只加载每个页面所需的 JavaScript，大大缩短了加载时间。

要建立一个 Next.js 项目，可以运行以下命令并使用其默认响应：

npx create-next-app@latest nextjs-wp-demo

在本指南中，您可以按照以下步骤获取我们的 Git 启动模板：

1. 访问本项目的 GitHub 仓库。
2. 选择 “Use this template > Create a new repository“，将启动代码复制到 GitHub 账户中的仓库（选中复选框以 include all branches）。
3. 将仓库拉到本地电脑，然后使用命令切换到 starter-files 分支： git checkout starter-files。
4. 运行 npm install 命令安装必要的依赖项。

安装完成后，在本地电脑上使用 npm run dev 启动项目。这样，项目就可以在 http://localhost:3000/ 上运行了。

了解项目

应用路由器在 Next.js 13 中引入，取代了现有的用于路由的 pages 目录。使用 App Router 设置路由还包括在 app 目录中创建文件夹。然后，在相应的文件夹中嵌套一个 page.js 文件，以定义路由。

在本项目中，app 是与之交互的核心目录，文件结构如下。

/
|-- /app
|-- /blog
|-- /[postId]
|-- page.js
|-- page.js
|-- globals.css
|-- layout.js
|-- navbar.js
|-- page.js

我们创建了三个页面：主页用于显示基本信息，博客页面用于显示 WordPress CMS 中的所有文章，动态页面（[postId]/page.js）用于显示单个文章。

你还会注意到 navbar.js 组件，它被导入 layout.js 文件，为项目创建布局。

从 WordPress 向 Next.js 抓取数据

使用 WordPress REST API，您可以通过向特定端点发送 HTTP 请求来获取文章、页面和自定义文章类型。

让我们在 blog/page.js 文件中发出获取请求，获取 WordPress CMS 中的所有文章，最后再根据传递的 id 参数在 blog/[postId]/page.js 中发出请求，动态获取每个文章。

在发出这些请求之前，我们最好将 JSON API 地址添加到环境变量中。这种方法可以确保你的 API 基本 URL 易于配置，而不是在多个文件中硬编码。

在 Next.js 项目根目录下创建一个 .env 文件，并添加以下内容：

NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2

确保将 URL 替换为网站的 JSON API。此外，在 .gitignore 文件中添加 .env 文件，这样它就不会将文件推送到 Git 提供商。

从 WordPress 获取所有文章到 Next.js

要从 WordPress 网站获取所有文章，请在 blog/page.js 文件中创建一个名为 getPosts 的异步函数。该函数使用 Fetch API 向 WordPress REST API 的 /posts 端点发出 GET 请求。

async function getPosts() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts;
}

收到响应后，它会将响应转换为 JSON 格式，并建立一个文章对象数组。 这些posts 可以在 Next.js 应用程序中呈现，提供直接从 WordPress 获取的博客文章动态列表。

const BlogPage = async () => {
const posts = await getPosts();
return (
<div className="blog-page">
<h2>All Blog Posts</h2>
<p>All blog posts are fetched from WordPress via the WP REST API.</p>
<div className="posts">
{posts.map((post) => {
return (
<Link href={`/blog/${post.id}`} className="post" key={post.id}>
<h3>{post.title.rendered}</h3>
<p
dangerouslySetInnerHTML= __html: post.excerpt.rendered 
></p>
</Link>
);
})}
</div>
</div>
);
};

在 Next.js 页面组件中，异步调用 getPosts 来获取文章。 然后，映射（map）posts 数组，在 <Link> 组件中呈现每个文章的 title 和 excerpt 。

这样不仅能显示文章，还能将每个文章封装在一个链接中，从而导航到文章的详细视图。这是通过使用 Next.js 基于文件的路由实现的，其中文章 ID 用于动态生成 URL 路径。

从 WordPress 向 Next.js 抓取动态文章

在上面的代码中，每个文章都被包裹在一个链接中，该链接可帮助用户导航到文章的详细视图。

对于单个文章页面，您可以利用 Next.js 中的动态路由创建一个页面，根据文章 ID 抓取并显示单个文章。在 stater-files 代码中已经创建了一个动态页面 [postID]/page.js。

创建与 getPosts 类似的 getSinglePost 函数，使用作为参数传递的文章 ID 获取单个文章。

async function getSinglePost(postId) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`
);
const post = await response.json();
return post;
}

在动态页面组件中，你可以从 URL 参数中提取文章 ID，使用此 ID 调用 getSinglePost，然后呈现文章内容。

const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
// ... the rest of the page code
};

然后，您就可以用获取的数据填充页面：

const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
if (!post) {
return <div>Loading...</div>;
}
return (
<div className="single-blog-page">
<h2>{post.title.rendered}</h2>
<div className="blog-post">
<p> dangerouslySetInnerHTML= __html: post.content.rendered ></p>
</div>
</div>
);
};

const nextConfig = {
output: 'export',
};

export async function generateStaticParams() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts.map((post) => ({
postId: post.id.toString(),
}));
}