從零開始，用 Next.js 和 Cloudflare Pages 打造你的部落格

avatar
Jesse
#next.js#cloudflare#blog#教學

過程中踩了不少坑，但也學到很多東西。這篇文章會完整記錄整個建置過程，希望能幫助到想要架設自己部落格的朋友。

為什麼選擇這個技術組合？

在開始之前，先說說為什麼選擇 Next.js + Cloudflare Pages：

  1. Next.js 15 - React 最新框架，支援 Server Components，效能優秀
  2. Cloudflare Pages - 免費額度很夠用，全球 CDN，部署超快
  3. Tailwind CSS - 方便好用
  4. MDX - 可以在 Markdown 裡面寫 React 元件，超方便

開始建置

第一步：選擇模板

我使用了 Tailwind Next.js Starter Blog 這個模板。它已經包含了部落格需要的大部分功能：

  • 文章管理系統
  • 標籤分類
  • 搜尋功能
  • RSS 訂閱
  • SEO 優化
npx degit 'timlrx/tailwind-nextjs-starter-blog'

第二步：自訂字體

  • 內文：Noto Sans TC（Google Fonts 提供的繁體中文字體）
  • 程式碼：JetBrains Mono（專為程式碼設計的等寬字體）

在 app/layout.tsx 引入字體：

import { JetBrains_Mono } from 'next/font/google'

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-jetbrains-mono',
})

第三步：部署到 Cloudflare Pages

這裡是最多坑的地方！

坑一：Yarn vs npm

Cloudflare Pages 檢測到 yarn.lock 會自動使用 Yarn，但可能會遇到 lockfile 版本問題。解決方法：

  1. 刪除所有 Yarn 相關檔案
  2. 改用 npm
rm -rf yarn.lock .yarnrc.yml .yarn
npm install

坑二：靜態輸出 vs 完整功能

一開始我用靜態輸出模式，雖然可以部署，但功能受限。後來改用 @cloudflare/next-on-pages：

npm install --save-dev @cloudflare/next-on-pages

建置指令改為：

npx @cloudflare/next-on-pages@1

坑三：nodejs_compat 相容性標誌

部署成功但網站顯示錯誤？這是因為沒有啟用 Node.js 相容性。

在 Cloudflare Pages 的設定中，找到 Compatibility Flags，在 Production 和 Preview 環境都加入：

nodejs_compat

坑四：RSS 生成路徑錯誤

原本的 RSS 腳本會根據環境變數決定輸出目錄，但在 Cloudflare Pages 建置時會出錯。修改 scripts/rss.mjs：

// 原本
const outputFolder = process.env.EXPORT ? 'out' : 'public'

// 改為
const outputFolder = 'public'

技術規格

  • 框架：Next.js 15 + React 19
  • 樣式：Tailwind CSS 4
  • 內容管理：Contentlayer + MDX
  • 部署：Cloudflare Pages
  • 版本控制：GitLab

Cloudflare Pages 設定

最後整理一下 Cloudflare Pages 的設定：

  • Build command: npx @cloudflare/next-on-pages@1
  • Build output directory: .vercel/output/static
  • Compatibility flags: nodejs_compat