哈罗，我是Eason，欢迎来到我的 「WordPress 再进化，用 Next.js 拆分前端，实现 UI 完全客制化及优化效能与 SEO」 30天铁人赛系列文章。

源起：需要改善现存 WordPress 专案

最近做专案需要，接手了一个旧有 WordPress 部落格网站的维护与开发，需要改善它的效能、增进使用者体验、套版全新的 UI 样式，加新功能等等。

由於我不熟 WordPress 开发，套UI时要硬改原本 theme 的 UI block 符合新样式很痛苦，追效能问题时改底层 php code 也很痛苦，我们 WordPress 没有使用版本控制，要回朔以前改过哪些东西很痛苦，改完要从测试环境 deploy 到正式环境时也很痛苦，整个开发者体验非常差。

也由於 WordPress 是架构满完整的整包 PHP-based 网页应用，如果不去魔改底层 php code 的话，优化效能常规手段就是装 WordPress plugin 来加速，但装 plugin 的动作又会增加 WordPress 的页面 size，好的 plugin 很多也要收费，很难在购买之前先试用知道有没有效，也由於 plugin 封装了很多功能在里头，对我来说满黑箱的，比较难知道里头做了哪些事情，不利於个人知识累积，要客制化的话也无从改起，掌握度不够高。

方法：导入 Next.js，将 WordPress 前端拆分出来

所以为了提升自己开发者体验、前端客制化的掌握度、以及能更大程度的提升效能，不要受限於 WordPress 各种限制，我的解法是「导入 Next.js，将 WordPress 前端拆分出来」，将原本只有 WordPress 的单体架构，变成前端是 Next.js，後端是 WordPress 的前後端分离架构。WordPress 只当作後端使用的这个情境有个专有名词叫Headless WordPress。

现存 WordPress 里面的文章内容和各种设定依然有效，编辑文章时依然能用 WordPress 的所见即所得编辑器去编辑，继续发挥他 CMS（Content Management System）的功能，而前端实际呈现给使用者的画面则交由新建立的 Next.js 专案负责，透过 API 跟 WordPress 抓取内容来呈现。

系列内容

目前我自己的 WordPress 专案已经完成 Next.js 导入了，确实在开发者体验、效能与使用者体验、客制化掌握度都有了很大的进步。

Next.js Frontend + Headless WordPress 这个使用情境比较少见，是这一两年才流行起来的做法，网路上中文的教学文章比较少，实作过程也遇过满多坑，以及需要考量的部分。所以我希望能贡献一点我的研究成果给大家参考。

这篇系列文章我会详实纪录我的整个拆分过程，比重大概 30% 会在 WordPress 调整，70% 会在 Next.js 新专案建立、画面切版、功能实现。

会以建立个人部落格为主题，从最初 WordPress 架设，到 Next.js 优化，整套流程都会一起走过。

此系列预计会涵盖以下主题：

1. 简介（You are here!!）
2. 网站需求规划
3. WordPress 架设，host 平台选择
4. WordPress 版本控制
5. WordPress 基本设定，基本文章内容
6. Nextjs 介绍
7. 各种render方式 CSR、SSG、SSR、ISR 介绍
8. Nextjs 专案建立，使用 cms-wordpress 当模板
9. Nextjs 架站，使用 vercel
10. GraphQL 介绍、wpgraphql 安装
11. 前端 apollo graphql 串接
12. preview 功能实作
13. TailwindCSS 简单 UI 切版
14. 复刻 category、tag 页
15. Dynamic page串接 & preview
16. Navigation graphql relay
17. WordPress menu 串接
18. 换页进度条 nprogress
19. YoastSEO meta 串接
20. Favicon
21. Custom 404 500 error page
22. Sitemap 建立
23. RSS feed 建立
24. PWA 优化
25. 图片优化
26. 搜寻功能
27. Google page insight 效能量测
28. Vscode 编辑器设定、Eslint, Prettier
29. GA 追踪
30. 功能验收
31. 结语

今年没有囤稿，上面这些文章都还没写 QAQ，内容会根据之後撰写状况动态调整，如果你有特别对哪部分有兴趣，或是有任何回馈和话想说，欢迎在底下留言告诉我～～

准备好了吗？那我们就出发罗！下一篇让我们一起来做「个人部落格」的需求规划。