這系列我們會以實作「個人部落格」為主題，希望兼顧以下項目：

• 開發者體驗：加功能調 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 開始架設！！