Next.js + WordPress 实战教程

概述

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 插件对接。

  1. 在 WordPress 上安装 wp-graphql 插件,确保它启用。
  2. 下载并安装 wp-graphiql 插件,这是一个 GraphQL API 的测试工具,可以辅助您编写GraphQL查询。
  3. 在 WordPress 中新建一个 API 用户,用于 Next.js 访问 wp-graphql。在 WordPress 后台中,依次点击 Users > Add New,输入相关信息后保存。
  4. 安装并启用 WPGraphQL JWT Authentication 插件,该插件是 JSON Web Token(JWT)验证的 WPGraphQL 扩展,可以帮助实现 WordPress 用户的身份验证。

安装 Next.js

通过 npm 安装 Next.js 模块。在本地项目的根目录打开终端,并输入以下命令:

--- ------- ---- ----- ---------

配置 GraphQL API

首先创建一个 .env 文件,用于存储环境变量。在文件中添加以下内容:

------------------------------------------------------

在 Next.js 项目中安装以下 npm 模块:

--- ------- ------------ ------- ------------ 

创建一个名为 lib/apollo.js 的文件,用于连接到 wp-graphql API:

------ - -------------- - ---- ---------------
------ ------------ ---- ---------------

----- ------ - --- --------------
    ---- ---------------------------------------
---

----- --- - -- ---------- --------- -- -- -
    ------ -
        --------------- ----------------
            ---------- -------------- --
        -----------------
    --
-

------ ------- ----

创建页面

接下来,我们为博客网站创建一个主页面。首先,在项目的 pages 目录下新建一个名为 index.js 的文件,并添加以下代码:

------ --- ---- --------------
------ - ----- - ---- ---------------

----- ----------- - ----
    ----- -
        ----- -
            ----- -
                --
                -----
                ----
                -------
            -
        -
    -
--

----- ----- - -- -- -
    ------ -
        ------ --------------------
            --- -------- ------ ---- -- -- -
                -- --------- ------ ------------------
                -- ------- ------ -------- -------

                ------ ------------------------- -- -
                    ---- --------------
                        ---------------------
                        ---------------------
                        ------------------------
                    ------
                ---
            --
        --------
    --
--

------ ------- ------

以上代码使用了 GraphQL 查询语句获取 WordPress 中所有的文章,并将其渲染到页面中。

集成 Wordpress 管理后台

最后,我们希望能够使用 WordPress 后台管理网站内容。在 Next.js 项目根目录的 package.json 文件中,添加以下依赖项:

-
  --------------- -
    --------- ---------
    --------------- --------
  -
-

在项目根目录中创建一个名为 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