在构建一个动态博客网站时，通常需要从内容源获取数据，比如像WordPress这样的内容管理系统（CMS）。

最近，我面临了一个挑战，即将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：通过使用GraphQL（需安装插件如WPGraphQL），WordPress支持无头内容管理，这使得查询和获取特定内容（如博客文章）以供React等前端框架使用变得简单。

尽管REST API很受欢迎，但我们将选择WPGraphQL，因为它允许进行更精确的查询和更灵活的操作。通过GraphQL，您可以请求 exactly需要的数据，这可以减少传输的数据量并提高性能。

使用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，数据在构建时被获取并作为props传递给组件。博客文章通过自定义组件如BlogHeader、BlogPosts和BlogNewsletter进行渲染，使页面动态而高效。

这展示了WordPress如何被用作Next.js应用程序的无头CMS。现在你已经成功将WordPress作为无头CMS整合到你的Next.js应用程序中，你可以继续从GraphQL API获取更多数据以增强你的应用程序的功能。

结论

通过使用WordPress作为无头CMS和Next.js作为前端，我们可以在利用WordPress强大的内容管理功能的同时，构建一个快速、对SEO友好的博客。

使用WPGraphQL让我们能够高效地获取我们所需的数据，给了我们更多的控制权并提高了网站的性能。

我希望这对你有帮助。祝你编码愉快！