使用 Next.js 将 WordPress 配置为无头 CMS

如果您喜欢这篇文章，请在 Twitter 上找到我，我每天都会在那里发布有用的内容。

欢迎阅读 Next.js 入门系列文章的第一篇。在本系列文章的第一部分，我们将学习如何使用这个非常实用的create-next-app工具创建一个全新的 Next.js 项目。

从那里开始，我们将把 WordPress 设置为无头 CMS 来为我们管理博客文章的内容。

随着我们继续本系列的后续文章，我们将介绍许多活动部分以完善整个过程，包括：

• 使用 Next.js 创建博客，
• 使用 WordPress 作为 Next.js 的无头 CMS，
• 为我们的静态 Next.js 博客创建 RSS 提要
• 使用 Netlify 捆绑、构建和部署我们的 Next.js 静态博客

然而，就本文而言，我们将从获取 Next.js 和无头 WordPress 实例设置的基础开始，并准备开始。

那么让我们开始吧！

为什么选择 Next.js

Next.js （由Vercel公司（前身为 Zeit）开发）是一个基于 React 的静态网站生成框架。它填补了 React 原生版本中的一些空白，例如动态页面路由，并且还允许开发人员选择从何处获取数据来支持他们的静态网站。

这不就像盖茨比吗

它在很多方面与Gatsby（我也很喜欢）非常相似。事实上，Next.js 和 Gatsby 有着相同的最终目标：将数据与静态生成器引擎连接起来，从而生成静态网站。

就我个人而言，我越用 Next.js，就越喜欢它。Gatsby 凭借其插件和社区提供了更成熟的生态系统，而 Next.js 的设置则简单得多，通常只需要更少的插件就能实现同样的功能。

我建议您尝试一下两者，看看您更喜欢哪一种。

为什么要使用 WordPress 作为无头 CMS

WordPress 是一个经常被诟病的平台，但它确实支撑着整个网络近 35% 的流量。它是一个非常受欢迎的内容管理平台，大多数人都接触过它，甚至在某个时候直接使用过它。

然而，它有时确实以笨重而闻名，并且需要做一些工作才能在前端制作出高性能的网站。

将 WordPress 视为无头 CMS 的最佳理由之一是它解决了静态生成网站面临的最大问题：编辑内容！

当然，对于大多数开发者（包括我自己）来说，这并不是什么负担。例如，我使用Forestry.io作为 Markdown 编辑器/CMS，直接在我的 GitHub 仓库中编辑支持这个网站的 Markdown 文件。

其他开发人员可能选择直接编辑 HTML，这很好。

但是对于“普通”用户、营销人员、内容编辑者、非开发人员来说怎么办呢？编辑 markdown 或 HTML 文件有点超出他们的需求，或者说，超出了他们的技能范围。

通过将 WordPress 与 Next.js 结合使用，使其成为一个无头 CMS，可谓三赢。网站访问者可以获得高性能、可访问性强的网站。开发人员可以获得卓越的开发体验，并且不会受到 WordPress 所需的非常繁琐的 PHP 开发代码的束缚。内容生产者和网站所有者仍然可以使用他们最喜欢的内容管理工具 WordPress 来处理编辑流程！

步骤 1：让 WordPress 为 Next.js 做好准备

安装和运行 WordPress 实例超出了本文的讨论范围，有很多地方可以帮助您开始安装和运行 WordPress 实例。

如果您正在寻找推荐，那么请查看亚马逊的 Lightsail或一般的 AWS 平台，因为通常有免费套餐可用，特别是在您刚刚开始时。

我们在这里关心的是向 WordPress 网站添加一些必要的部分，以将其转变为 Next.js 可以访问的无头 CMS。

因此，假设您已经设置了 WordPress 实例，让我们继续。

（PS - 如果您想使用我在本文中使用的演示网站，那么您可以在这里查看 - http://demo.robkendal.co.uk/

安装 WPGraphQL（和插件）

开箱即用，您可以使用 WordPress REST API 来获取数据等，但我们将使用 GraphQL 来完成繁重的工作。

然而，这意味着我们必须安装一些插件，然后才能开始通过 Next.js 访问我们的数据。

因此，我们将前往https://www.wpgraphql.com/并安装以下插件：

• WPGraphQL 主插件
• WPGraphQL for ACF（高级自定义字段）
• WPGraphiQL - GraphQL 的可视化查询构建器/探索器

注意： 使用 WPGraphQL 内容，您必须访问这些链接，将源代码（zip）下载为 zip 文件，然后通过管理菜单 > 插件 > 添加新 > 上传对话框手动将其上传到 WordPress。

选择 GraphQL 的原因是它比 REST API 更快，并且 GraphQL 赋予我们强大而灵活的能力，让我们能够只返回所需的数据。使用 WPGraphiQL 插件还允许我们直接在 WordPress 实例内部构建查询，然后再将其迁移到 Next.js。

这非常重要，因为我们可以看到查询的输出，并在进行过程中对其进行测试和调整，然后才盲目地将它们添加到我们的本地开发实例中。

我们还需要最后一个插件——高级自定义字段(ACF)。它允许我们在帖子或页面中添加额外的字段，以扩展其内容功能。

向帖子添加自定义字段

接下来，如果您不想/不需要在帖子上使用自定义字段，则此部分是可选的，我们将使用 ACF 设置一些自定义字段，并确保它们已为 WPGraphQL 启用，否则它们将不会显示。

转到您的 WordPress 管理控制台，然后转到“自定义字段”>“字段组”并创建一个新的字段，随意命名。

在我的网站上，我将字段组命名为“额外帖子信息”。然后，我添加了三个字段：

1. 作者摘录 - 文本区域字段
2. 预览图像 - 一个简单的图像选择字段
3. 缩略图 - 如上

您可以添加任何您想要的字段并根据您的需要命名它们。

从这里一直滚动到此页面的底部并启用 WPGraphQL 设置，如下所示：

1. 确保Show in GraphQL设置为“是”
2. 为GraphQL Field Name你的额外字段设置一个有意义且描述性的名称。这将是我们在 GraphQL 中引用额外字段时使用的名称。在这里，我将我的字段命名为extraPostInfo

就这样。最后一步是在管理菜单的“帖子”部分填充一些虚拟帖子。只需创建一些新帖子，并添加任何你想要的内容即可（我发现 Lorem Ipsum 在这里效果很好）。

在 GraphQL 中查看我们的帖子

安装了所有必要的 WPGraphQL 帖子，添加了一些额外的字段，并确保将它们添加到 GraphQL 模式中，并添加一些虚拟帖子内容后，我们可以通过 WPGraphiQL 资源管理器查看帖子数据。

转到 WordPress 管理控制台中的 GraphiQL 菜单项。

现在来看看真正的魔法！GraphiQL 是一个可视化查询构建器，它允许您简单地扩展和切换左侧的数据字段，使用这些数据字段在中间构建查询，然后执行该查询以查看返回的数据。

非常强大，我相信你一定会同意。GraphQL 语言和 GraphiQL 工具的详细内容本身就足以写成文章和课程，但你也可以访问GraphQL 官方网站了解更多信息。

为了达到我们的目的，您可以在下面看到，我在树形菜单上扩展了各种路径，首先是“” posts，这会自动在中心编辑器面板中为我构建一个查询。当我按下“播放”按钮时，查询就会执行，结果会显示在最右侧的面板中。

构建的查询如下所示：

    query MyQuery {
      posts {
        edges {
          node {
            id
            date
            title
            slug
            featuredImage {
              node {
                mediaItemUrl
              }
            }
            extraPostInfo {
              authorExcerpt
            }
          }
        }
      }
    }

此查询返回的数据如下：

{
  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "id": "cG9zdDoyOA==",
            "date": "2020-07-09T07:18:42",
            "title": "A third post with an interesting name",
            "slug": "a-third-post-with-an-interesting-name",
            "featuredImage": null,
            "extraPostInfo": {
              "authorExcerpt": "I'm a thing. I usually try to keep my sadness pent up inside where it can fester quietly as a mental illness. Leela, are you alright? You got wanged on the head. Okay, I like a challenge. Robot 1-X, save my friends! And Zoidberg!"
            }
          }
        },
        {
          "node": {
            "id": "cG9zdDoyNQ==",
            "date": "2020-07-09T07:17:19",
            "title": "Another awesome post with a really long title",
            "slug": "another-awesome-post-with-a-really-long-title",
            "featuredImage": null,
            "extraPostInfo": {
              "authorExcerpt": "It's okay, Bender. I like cooking too. Why would I want to know that? Fry, we have a crate to deliver. You guys aren't Santa! You're not even robots. How dare you lie in front of Jesus? My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards."
            }
          }
        },
        ...others
      ]
    }
  }
}

这样，我们就将 WordPress 实例设置为无头 CMS，并将所有 Posts 数据准备好放入一个漂亮、整洁的 GraphQL 查询中。

步骤 2，创建 Next.js 项目

使用 Next.js 将 WordPress 用作无头 CMS 的项目设置过程的最后一步也是最重要的部分：Next.js！

碰巧的是，Next.js 有一个名为的项目创建工具create-next-app，它将为我们创建一个引导的 Next.js 应用程序，其中包含准备好的配置骨架。

与 React 自己的create-react-app工具非常相似，该create-next-app工具从命令行运行并创建一个包含所有必要项目文件的目录。

这是一个很好的起点，现在让我们在你选择的目录中运行它。启动你的终端并运行以下命令：

npx create-next-app headless-wp-demo

完成后，您将收到一条消息，表明一切成功，然后您将获得一些命令来构建、运行和启动我们的新应用程序。

让我们首先通过在终端中输入以下命令来检查一切是否正常：

cd headless-wp-demo

最后：

yarn dev

您将看到网站快速构建，然后显示一条消息，提示您的网站已成功在 上启动http://localhost:3000。在您选择的浏览器中打开该地址，您将看到以下页面。

就目前而言，它确实就是这么简单。

在第二部分中，我们将研究如何使用 Next.js 访问我们的 GraphQL 数据并深入了解动态路由。