概述
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 模块。在本地项目的根目录打开终端,并输入以下命令:
--- ------- ---- ----- ---------
配置 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