在建立動態部落格網站時，從內容來源（如CMS（內容管理系統）如WordPress）抓取數據是很常見的。

最近，我遇到了將WordPress整合到我現有的Next.js專案中的挑戰。我有一個在WordPress上托管的部落格，並想將它遷移到我的Next.js應用中。

我需要一個解決方案，能讓我將WordPress作為無頭CMS使用。目標很簡單：利用WordPress管理內容的威力，同時利用現代化的前端框架來展示內容。

在這篇文章中，我們將走訪如何將WordPress整合到Next JS應用中。

為什麼使用無頭CMS？

無頭CMS將內容管理（後端）與表示層（前端）分開。這讓開發者對內容的傳遞和展示有更大的靈活性，不受傳統主題或佈局的限制。

它對性能和可擴展性很好，提供了對前端內容渲染的更多控制。在這種情況下，你將使用WordPress作為你的內容管理系統，但使用Next.js以更現代、效能更高的方式展示內容。

Next.js是什麼？

如果你還沒有遇到過Next.js，它是一個基於React的強大框架，使建立優化的、服務器端渲染（SSR）應用程序變得更加容易。

它提供了一系列開箱即用的功能，如文件基於路由、API路由、靜態站點生成（SSG）和增量靜態再生（ISR）。所有這些都使它成為創建快速、SEO友好的網站的良好選擇。

如何將WordPress與Next.js连线

當您使用WordPress作為無頭CMS時，主要有兩種方法將您的Next.js應用程序連接到WordPress後端：

  1. WP REST API：WordPress自带一個REST API，允許您以JSON格式從WordPress獲取內容。

  2. WPGraphQL：WordPress通過使用GraphQL（搭配像WPGraphQL這樣的插件）支持無頭內容管理，使您能夠輕鬆查詢和獲取特定內容，例如博客文章，以供在React等前端框架中使用。

雖然REST API很受欢迎，但我們將選擇WPGraphQL，因為它允許進行更精確的查询和更具灵活性。通過GraphQL，您可以索求精確需要的數據，這可以減少傳輸的數據量並提高性能。

使用WPGraphQL將WordPress和Next.js连线步驟

您需要做的第一件事就是在您的WordPress网站上安装WPGraphQL插件。此插件在WordPress中启用了GraphQL API功能。您可以像安装任何其他插件一样，通过导航到WordPress管理仪表板来安装插件。

首先，前往插件页面，然后选择添加新插件。接着，搜索WPGraphQL，找到后，简单地安装并激活插件即可。

在安装并激活插件之后，GraphQL IDE 将出现在WordPress仪表板上。在这里，您可以测试为前端开发可能需要的各种查询。

接下来我们看看前端。

如何在Next.js中从WPGraphQL获取数据

在您的Next.js项目中，您需要从GraphQL API获取数据。以下是用graphql-request进行查询的简单示例：

1. 安装graphql-request以方便查询GraphQL API：

npm install graphql-request

2. 在您的Next.js组件中，创建一个GraphQL查询以获取博客文章：

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

在上面的代码中，您的Next.js应用程序使用GraphQL从WordPress后端获取博客文章，并在前端显示它们。创建的GraphQL查询用于检索文章的标题、作者、内容和特色图片等详细信息。

通过使用Next.js的getStaticProps，数据在构建时获取，并作为属性传递给组件。博客文章通过自定义组件如BlogHeader、BlogPosts和BlogNewsletter进行渲染，使得页面动态且高效。

這說明了如何將 WordPress 作為 Next.js 應用的無頭 CMS 使用。現在，您已經成功將 WordPress 作為無頭 CMS 集成到您的 Next.js 應用中，您可以繼續從 GraphQL API 獲取更多數據，以增強應用的功能。

結論

通過使用 WordPress 作為無頭 CMS 和 Next.js 作為前端，我們可以建立一個快速且 SEO 友好的博客，同時利用 WordPress 強大的內容管理功能。

使用 WPGraphQL 使我們能夠有效地獲取所需的數據，從而使我們擁有更多的控制權並提高網站的性能。

希望這對您有幫助。祝您編程愉快!