如何使用 WordPress 作为 Next.js 的无头 CMS

了解无头 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 的潜力不仅限于帖子，它还允许检索和管理页面、评论、媒体等。