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

了解无头 WordPress

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

这种开发模式的好处是,可以继续使用WordPress那强大且易用的内容管理工具,同时又能享受到现代前端技术如Next.js带来的种种优势,比如更快的页面加载速度(通过服务器端渲染或静态网站生成),更好的用户体验,以及更灵活的定制性。

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

设置 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 的无头 CMS

从 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 的无头 CMS

从 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 的无头 CMS

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


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/9438/

(0)
上一篇 2024年 5月 8日 下午2:40
下一篇 2024年 5月 9日 上午10:28

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!