wordpress与next.js搭配使用

写在前面

今天给大家介绍下nextJS与wordpress混合使用，可以同时兼顾各家优势~~

组合优势简介

将WordPress与Next.js组合使用可以结合两个平台的最佳特性，为现代web开发带来一系列独特的优势：

1. 内容管理的便利性：

• • WordPress作为CMS：WordPress是一个成熟且强大的内容管理系统(CMS)，它提供了直观的后台管理界面，使得非技术用户也能轻松添加、编辑和管理内容。对于博客、新闻网站或需要频繁更新内容的项目来说，WordPress是一个理想的选择。
  • 易于编辑与协作：利用WordPress的编辑功能，团队成员无需了解代码即可创建和更新页面或文章，提高了内容创作效率。

1. 静态站点生成与性能优化：

• • Next.js的SSG和SSR：Next.js支持静态站点生成(Static Site Generation, SSG)和服务器端渲染(Server-Side Rendering, SSR)，这有助于提高网页的加载速度，改善SEO，并在不牺牲动态功能的前提下实现更好的性能。
  • 自动优化：Next.js通过代码拆分、客户端导航和预取策略自动优化应用性能，确保快速且高效的用户体验。

创建项目

npx create-next-app --example cms-wordpress cms-wordpress-app

配置wordpress

安装WPGraphQL

• wordpress面板——插件——添加插件—WPGraphQL

也支持通过上传的方式安装

• 在已安装列表启用插件

• 配置WPGraphQL路径

wordpress默认是朴素，通过/index.php?graphql访问的，不友好。在设置里面，将固定链接改为其他方式，如文档名，保存设置。

配置项目访问地址

在.env.local文件中按如下配置：

# 按自己的运行的来
WORDPRESS_API_URL=http://localhost:9999/graphql

# Only required if you want to enable preview mode
# WORDPRESS_AUTH_REFRESH_TOKEN=
# WORDPRESS_PREVIEW_SECRET=

效果展示

访问：http://localhost:3000/ 查看效果如下：

有了上面效果后，你就可以在wordpress上写文章或者运营其他产品，在next.js服务器上面直接查看，双管齐下。

其他

• WPGraphQL在wordpress的使用

• wordpress支持的丰富模版

总结

WordPress与Next.js的结合可以为开发人员提供一个强大、灵活且高性能的web开发解决方案，既满足了内容管理的便捷需求，又确保了现代web应用的高性能标准。

参考：

mp.weixin.qq.com/s/XEAUtwiB2…