了解无头 WordPress
无头 WordPress 指的是只使用 WordPress 的后台功能（管理和存储内容），而使用一个单独的系统（如 Next.js）来展示前端。
这种开发模式的好处是，可以继续使用WordPress那强大且易用的内容管理工具，同时又能享受到现代前端技术如Next.js带来的种种优势，比如更快的页面加载速度（通过服务器端渲染或静态网站生成），更好的用户体验，以及更灵活的定制性。
设置 Next.js 环境
Next.js 可帮助开发人员轻松构建网络应用程序，提高性能并优化开发体验。它的主要功能之一是基于文件的路由，可简化路由的创建。
Next.js 还非常注重性能，提供了自动代码分割等功能，只加载每个页面所需的 JavaScript，从而大大缩短了加载时间。要建立一个 Next.js 项目，可以运行以下命令并使用其默认响应：
npx create-next-app@latest nextjs-wp-demo了解项目
Next.js 13 引入了应用程序路由器，取代了现有的用于路由的页面目录。使用 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 中的所有帖子，然后最后发出一个请求， 根据传递的参数动态获取blog/[postId]/page.jsid中的每个帖子。
在发出这些请求之前，最好将 JSON API 地址添加到环境变量中。这种方法可确保 API 基本 URL 易于配置，并且不会跨多个文件进行硬编码。
在 Next.js 项目的根目录中创建一个.env文件并添加以下内容：
NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2确保将 URL 替换为站点的 JSON API。另外，添加.env到.gitignore 文件，这样它就不会将该文件推送到 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 格式，并建立一个帖子对象数组。这些帖子可以在 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 来获取帖子。然后，映射帖子数组，在 组件中呈现每个帖子的标题和摘录。
这样不仅能显示帖子，还能将每个帖子封装在一个链接中，从而导航到帖子的详细视图。这是通过使用 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>
);
};总结
学习如何在 Next.js 项目中利用无头 WordPress 动态获取和显示帖子。这种方法可以将 WordPress 内容无缝集成到 Next.js 应用程序中，提供现代化的动态网络体验。无头 CMS API 的潜力不仅限于帖子，它还允许检索和管理页面、评论、媒体等。