概述
Next.js 是一个基于 React 的服务器渲染应用框架，它能够帮助前端开发人员快速构建出适应多种设备的响应式网站，并具有良好的 SEO，性能和可靠性。与此同时，WordPress 是一款功能强大的开源内容管理系统（CMS），它为用户提供了非常灵活和易用的内容管理工具。本文将介绍如何将 Next.js 和 WordPress 结合起来使用，建立一个优秀的博客网站。
环境准备
在开始之前，您需要先确保本地环境已经搭建好：
- 安装 Node.js 和 npm
- 安装 WordPress
- 安装 MySQL 或其他关系数据库
配置 WordPress
与 Next.js 集成的 WordPress 有许多插件可供选择，但是这里我们选择功能较为完整且更新较快的 wp-graphql 插件。以下步骤将让您的 WordPress 与 GraphQL API 的 wp-graphql 插件对接。
- 在 WordPress 上安装 wp-graphql 插件，确保它启用。
- 下载并安装 wp-graphiql 插件，这是一个 GraphQL API 的测试工具，可以辅助您编写GraphQL查询。
- 在 WordPress 中新建一个 API 用户，用于 Next.js 访问 wp-graphql。在 WordPress 后台中，依次点击 Users > Add New，输入相关信息后保存。
- 安装并启用 WPGraphQL JWT Authentication 插件，该插件是 JSON Web Token（JWT）验证的 WPGraphQL 扩展，可以帮助实现 WordPress 用户的身份验证。
安装 Next.js
通过 npm 安装 Next.js 模块。在本地项目的根目录打开终端，并输入以下命令：
npm install next react react-dom
配置 GraphQL API
首先创建一个 .env 文件，用于存储环境变量。在文件中添加以下内容：
WORDPRESS_GRAPHQL_ENDPOINT=http://localhost/wp/graphql
在 Next.js 项目中安装以下 npm 模块：
npm install apollo-boost graphql react-apollo
创建一个名为 lib/apollo.js 的文件，用于连接到 wp-graphql API：
-- -------------------- ---- -------
------ - -------------- - ---- ---------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- ---------------------------------------
---
----- --- - -- ---------- --------- -- -- -
------ -
--------------- ----------------
---------- -------------- --
-----------------
--
-
------ ------- ----创建页面
接下来，我们为博客网站创建一个主页面。首先，在项目的 pages 目录下新建一个名为 index.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ --- ---- --------------
------ - ----- - ---- ---------------
----- ----------- - ----
----- -
----- -
----- -
--
-----
----
-------
-
-
-
--
----- ----- - -- -- -
------ -
------ --------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ------------------------- -- -
---- --------------
---------------------
---------------------
------------------------
------
---
--
--------
--
--
------ ------- ------以上代码使用了 GraphQL 查询语句获取 WordPress 中所有的文章，并将其渲染到页面中。
集成 Wordpress 管理后台
最后，我们希望能够使用 WordPress 后台管理网站内容。在 Next.js 项目根目录的 package.json 文件中，添加以下依赖项：
{
"dependencies": {
"cookie": "^0.3.1",
"jsonwebtoken": "^8.5.1"
}
}在项目根目录中创建一个名为 jwt.js 的文件，该文件用于通过 JWT 身份验证来与 WordPress 后台进行连接：
-- -------------------- ---- -------
------ --- ---- ---------------
----- ------------- - ----- ---- --------- -- -
----- ----- - ---------
-
---- ------------
---- ---
---- --------------------------------
---- --------------------- - ------
---- --------------------- - ----- - -----
----- -
--- ---
--------- ---------
--
--
----------------------
--
------ ------- ----------
--
------ ------- --------------创建登录页面
接着，我们创建一个名为 login.js 的页面，用于登录 WordPress 后台：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ ----- ---- ---------------------
------ ------------- ---- ---------
----- ----- - -- -- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ------------ - ----- ----- -- -
-----------------------
----- -------- - ----- --------------------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
--------- ---------
--------- ---------
---
---
----- ---- - ----- ----------------
-- ------------ -
----- ----- - ----- --------------------------- ------------------------
--------------- - -----------------
-------------------- - ----
-
--
------ -
----- ------------------------
-------
---------
------ ----------- ---------------- ----------- -- ---------------------------- --
--------
-------
---------
------ --------------- ---------------- ----------- -- ---------------------------- --
--------
------- ----------------- -----------
-------
--
--
------ ------- ------以上代码中，我们使用了 isomorphic-unfetch 库，它提供了一种在服务器端和客户端都能使用的 fetch API。
最后，在项目的 pages 文件夹中新建一个名为 _app.js 的文件，用于实现全局页面布局：
-- -------------------- ---- -------
------ --- ---- ----------------
------ ----- ---- ----------
----- ----- - -- ---------- --------- -- -- -
----- ----- - --------------- - ---------------------------------------------------------------------- ----- - -----
-- ---------------------- -- ------- -
------ ------ ---
-
------ ---- --------------------- --------------------- ---
--
------ ------- ------在以上代码中，我们使用了 process.browser 检查当前代码是否在浏览器端运行。如果需要登录 API，则将用户重定向到 Login 页面；反之则将网站渲染到 App 中。
结论
通过本文介绍的方法，我们可以快速集成 WordPress 后台管理，在 Next.js 中构建一个符合 SEO、性能和可靠性的博客网站。本实战教程也是去年 Node.js 峰会 China NodeConf 2019 上的主题演讲，完整演讲可在 https://www.bilibili.com/video/BV1Jf4y1z7HX 回看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6718b942ad1e889fe22ddd28