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
准备步骤:
- 使用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
- 安装并启用wp-graphql插件 https://cn.wordpress.org/plugins/wp-graphql
- 将根目录的环境配置模板文件拷贝一份 进行修改。
cp .env.local.example .env.local
将 WORDPRESS_API_URL 改为 wp-graphql插件 设置的值。
WORDPRESS_API_URL=https://xxx.xx.com/xx123113cv1graphql345
- 修改根目录的next.config.js文件,将wp博客的域名加入到 domains 数组。
- npm run dev
- tailwind 使用默认的设计:https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L7
设计与开发 待更新…
1.如需转载本站原创文章,请务必注明文章出处并附上链接,非常感谢。
2.本站用于记录个人 工作、学习、生活,非商业网站,更多信息请 点击这里