使用NEXT.JS开发WordPress主题

next.js是一款react的服务端渲染框架，在服务端渲染页面返回给浏览器，nextjs 通过graphql将wordpress作为api服务端，通过next.js，基本能够脱离php开发WordPress主题。基于一切能用js实现的功能都要用js实现的想法，最近计划使用next.js重构WordPress博客主题。作为前端开发，这样做能够把更多的关注度放在JavaScript上。

基于nextjs wp模板

仓库地址：https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress

准备步骤：

1. 使用npx或yarm或pnpm 执行create-next-app 下载安装wordpress模板案例 。

npx create-next-app --example cms-wordpress cms-wordpress-app
# or
yarn create next-app --example cms-wordpress cms-wordpress-app
# or
pnpm create next-app --example cms-wordpress cms-wordpress-app

2. 安装并启用wp-graphql插件 https://cn.wordpress.org/plugins/wp-graphql

3. 将根目录的环境配置模板文件拷贝一份 进行修改。

cp .env.local.example .env.local

将 WORDPRESS_API_URL 改为 wp-graphql插件 设置的值。

WORDPRESS_API_URL=https://xxx.xx.com/xx123113cv1graphql345

4. 修改根目录的next.config.js文件，将wp博客的域名加入到 domains 数组。

5. npm run dev

6. tailwind 使用默认的设计：https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L7

设计与开发 待更新…