这系列我们会以实作「个人部落格」为主题，希望兼顾以下项目：
- 开发者体验：加功能调 UI 时有版本控制、能使用 React、Next.js 生态系各种最新功能
- 编辑者体验：不会写 code 也能用 WordPress 後台编辑器改文章
- 读者体验：网页读取速度要快、要有RWD支援手机和电脑版阅读
- 搜寻引擎优化 SEO：网页读取速度要快、各种 meta tag 要加好
因此我们会使用「Next.js Frontend + Headless WordPress as CMS」这套方案，满足以上需求。
Next.js 前端页面
前端会有的页面满单纯的，基本上就是复刻原生 WordPress 会有的页面，包含以下页面：
- 首页 IndexPage：列出所有文章，依照发文时间新到旧排序，并且有 Pagination 分页机制，一页列出 10 篇文章，每篇文章会显示缩图、简介文字、所属分类、发文时间，首页也会包含搜寻框能搜寻文章
- 文章细节页 PostPage：完整文章内容，所属分类、所属 Tag、相关文章列表
- 类别页 CategoryPage：列出属於某个 Category 的所有文章
- 标签页 TagPage：列出属於某个 Tag 的所有文章
- 搜寻页 SearchPage：搜寻文章後会在这页显示 Match 的文章列表
其他隐性功能需求
除了比较明显能看到的页面，完整的网站也应该有下面这些设计：
- Favicon：就是会显示在浏览器 tab 里的网站 Logo，之後会有一篇专门文章教你如何生成它并埋入网站
- 404 NotFoundPage：读者不小心进到错的画面时，我们也该设计专门错误页面显示给读者，让他不要太紧张，并导引他回到正确的画面
- Sitemap：这是个专门给搜寻引擎爬虫例如 Google 看的隐藏页面，用来告诉爬虫我们网站有哪些页面，因为我们要做 SEO，因此也必须在 Next.js 前端实现 Sitemap 生成
更多酷炫功能！
我们是谁？我们是开发者！我们最喜欢的就是尝试新技术！有什麽比个人部落格更适合导入新技术来玩玩呢？因此我们这系列也会尝试在新 Next.js 前端导入各种有趣的技术，包含：
- Storybook：一套很棒的 UI component 开发环境，能大幅加速我们刻UI的速度和验证 component 在不同条件下的样式
- TailwindCSS：现在最热门的 CSS utility-first 框架，切版速度神快，我们会用它来刻上面提到的各种页面
- RSS Feed：我们也希望熟悉 RSS 工具的读者能用 RSS 方式订阅我们部落格，因此我们也会让部落格支援 RSS！
- PWA：既然都用到了这麽多酷东西，怎麽少的了 PWA（Progressive Web App）呢？这是一套新的网页设定方法，设定完成後就能让读者能以App 的方式安装我们的网站到他的手机或电脑桌面，用起来会跟原生 App 非常相近！
以上我们讲完了这 30 天我们会做出来的个人部落格需求规划，下一篇会开始实际架站！我们会先从 WordPress 开始架设！！