了解無頭 WordPress

無頭 WordPress 指的是只使用 WordPress 的后臺(tái)功能（管理和存儲(chǔ)內(nèi)容），而使用一個(gè)單獨(dú)的系統(tǒng)（如 Next.js）來展示前端。

這種開發(fā)模式的好處是，可以繼續(xù)使用WordPress那強(qiáng)大且易用的內(nèi)容管理工具，同時(shí)又能享受到現(xiàn)代前端技術(shù)如Next.js帶來的種種優(yōu)勢(shì)，比如更快的頁(yè)面加載速度（通過服務(wù)器端渲染或靜態(tài)網(wǎng)站生成），更好的用戶體驗(yàn)，以及更靈活的定制性。

設(shè)置 Next.js 環(huán)境

Next.js 可幫助開發(fā)人員輕松構(gòu)建網(wǎng)絡(luò)應(yīng)用程序，提高性能并優(yōu)化開發(fā)體驗(yàn)。它的主要功能之一是基于文件的路由，可簡(jiǎn)化路由的創(chuàng)建。

Next.js 還非常注重性能，提供了自動(dòng)代碼分割等功能，只加載每個(gè)頁(yè)面所需的 JavaScript，從而大大縮短了加載時(shí)間。要建立一個(gè) Next.js 項(xiàng)目，可以運(yùn)行以下命令并使用其默認(rèn)響應(yīng)：

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

了解項(xiàng)目

Next.js 13 引入了應(yīng)用程序路由器，取代了現(xiàn)有的用于路由的頁(yè)面目錄。使用 App Router 進(jìn)行路由也需要在 app 目錄中創(chuàng)建文件夾。然后，在相應(yīng)的文件夾中嵌套一個(gè) page.js 文件，以定義路由。在本項(xiàng)目中，app 是與之交互的核心目錄，文件結(jié)構(gòu)如下。

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

我們創(chuàng)建了三個(gè)頁(yè)面：主頁(yè)用于顯示基本信息，博客頁(yè)面用于顯示 WordPress CMS 中的所有帖子，動(dòng)態(tài)頁(yè)面（[postId]/page.js）用于顯示單個(gè)帖子。還要注意到 navbar.js 組件，它被導(dǎo)入 layout.js 文件，為項(xiàng)目創(chuàng)建布局。

從 WordPress 獲取數(shù)據(jù)到 Next.js

使用 WordPress REST API，可以通過向特定端點(diǎn)發(fā)送 HTTP 請(qǐng)求來獲取帖子、頁(yè)面和自定義帖子類型。在blog/page.js?文件中發(fā)出一個(gè)獲取請(qǐng)求，以獲取 WordPress CMS 中的所有帖子，然后最后發(fā)出一個(gè)請(qǐng)求，?根據(jù)傳遞的參數(shù)動(dòng)態(tài)獲取blog/[postId]/page.jsid中的每個(gè)帖子。

在發(fā)出這些請(qǐng)求之前，最好將 JSON API 地址添加到環(huán)境變量中。這種方法可確保 API 基本 URL 易于配置，并且不會(huì)跨多個(gè)文件進(jìn)行硬編碼。

?在 Next.js 項(xiàng)目的根目錄中創(chuàng)建一個(gè).env文件并添加以下內(nèi)容：

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

確保將 URL 替換為站點(diǎn)的 JSON API。另外，添加.env到.gitignore?文件，這樣它就不會(huì)將該文件推送到 Git 提供程序。

從 WordPress 獲取所有帖子到 Next.js

要從 WordPress 網(wǎng)站獲取所有帖子，要在 blog/page.js 文件中創(chuàng)建一個(gè)名為 getPosts 的異步函數(shù)。該函數(shù)使用 Fetch API 向 WordPress REST API 的 /posts 端點(diǎn)發(fā)出 GET 請(qǐng)求。

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

收到響應(yīng)后，它會(huì)將響應(yīng)轉(zhuǎn)換為 JSON 格式，并建立一個(gè)帖子對(duì)象數(shù)組。這些帖子可以在 Next.js 應(yīng)用程序中呈現(xiàn)，提供直接從 WordPress 獲取的博客帖子動(dòng)態(tài)列表。

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 頁(yè)面組件中，異步調(diào)用 getPosts 來獲取帖子。然后，映射帖子數(shù)組，在 組件中呈現(xiàn)每個(gè)帖子的標(biāo)題和摘錄。

這樣不僅能顯示帖子，還能將每個(gè)帖子封裝在一個(gè)鏈接中，從而導(dǎo)航到帖子的詳細(xì)視圖。這是通過使用 Next.js 基于文件的路由實(shí)現(xiàn)的，其中帖子 ID 用于動(dòng)態(tài)生成 URL 路徑。

從 WordPress 獲取動(dòng)態(tài)帖子到 Next.js

在上面的代碼中，每個(gè)帖子都被包裹在一個(gè)鏈接中，該鏈接可幫助用戶導(dǎo)航到帖子的詳細(xì)視圖。對(duì)于單個(gè)帖子頁(yè)面，你可以利用 Next.js 中的動(dòng)態(tài)路由來創(chuàng)建一個(gè)頁(yè)面，根據(jù)帖子 ID 抓取并顯示單個(gè)帖子。在 stater-files 代碼中已經(jīng)創(chuàng)建了一個(gè)動(dòng)態(tài)頁(yè)面 [postID]/page.js。

創(chuàng)建與 getPosts 類似的 getSinglePost 函數(shù)，使用作為參數(shù)傳遞的帖子 ID 獲取單個(gè)帖子。

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

在動(dòng)態(tài)頁(yè)面組件中，你可以從 URL 參數(shù)中提取帖子 ID，使用此 ID 調(diào)用 getSinglePost，然后呈現(xiàn)帖子內(nèi)容。

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

然后，就可以用獲取的數(shù)據(jù)填充頁(yè)面：

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>
    );
};

總結(jié)

學(xué)習(xí)如何在 Next.js 項(xiàng)目中利用無頭 WordPress 動(dòng)態(tài)獲取和顯示帖子。這種方法可以將 WordPress 內(nèi)容無縫集成到 Next.js 應(yīng)用程序中，提供現(xiàn)代化的動(dòng)態(tài)網(wǎng)絡(luò)體驗(yàn)。無頭 CMS API 的潛力不僅限于帖子，它還允許檢索和管理頁(yè)面、評(píng)論、媒體等。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息