Vercel vs Cloudflare Pages 部署

嘗試使用 Vercel 後，後期遷移個人網站到 Cloudflare Pages，這篇文章整理兩者的差異比較，以及遷移過程中學到的知識。

Vercel vs Cloudflare Pages

免費方案差異

項目	Vercel	Cloudflare Pages
頻寬	100 GB/月	無限制
建置時間	6000 分鐘/月	500 次/月
並行建置	1 個	1 個
自訂域名	支援	支援
全球 CDN	支援	支援
自動 HTTPS	支援	支援
Serverless Functions	支援	支援（Workers）
Edge Functions	支援	支援

對於流量較大的靜態網站，Cloudflare Pages 的無限頻寬是明顯優勢。

技術架構差異

Vercel

與 Next.js 深度整合（同一家公司開發）
原生支援 SSR、ISR、App Router 等所有 Next.js 功能
部署流程簡單，幾乎零配置

Cloudflare Pages

原生支援純靜態網站
動態功能需透過 Cloudflare Workers 執行
Next.js 動態功能需要 OpenNext 轉換

部署流程差異

Vercel 部署流程

GitHub Push → Vercel 自動偵測 → 建置 → 部署到 Edge Network

Vercel 會自動偵測專案類型，對 Next.js 專案幾乎不需要任何設定。

Cloudflare Pages 部署流程

GitHub Push → Cloudflare 建置 → 部署到 CDN

純靜態網站很簡單，但 Next.js 動態功能需要額外的轉換層。

遷移過程中學到的知識

1. Next.js 的 output 模式

Next.js 有三種輸出模式：

模式	說明	適用場景
`standalone`	包含 Node.js 伺服器的完整應用	需要 SSR 的應用
`export`	純靜態 HTML 檔案	部落格、作品集等靜態網站
預設	混合模式，依頁面特性決定	Vercel 部署

在 next.config.mjs 中設定：

const nextConfig = {
  output: 'export',  // 產生純靜態檔案到 out 目錄
}

使用 export 模式的限制：

不能使用 getServerSideProps（SSR）
不能使用 revalidate（ISR 增量靜態再生）
不能使用 API Routes（需要伺服器）
不能使用 next/image 的預設優化（需要伺服器處理）

2. OpenNext 是什麼？

OpenNext 是一個開源專案，目的是讓 Next.js 可以在 AWS Lambda、Cloudflare Workers 等 Serverless 環境執行。

當 Cloudflare 偵測到 Next.js 專案時，會自動嘗試使用 OpenNext 來處理，但這需要 Next.js 15+ 版本。如果你的專案是 Next.js 14，就會遇到版本不相容的錯誤：

ERROR Next.js version 14.2.35 is not supported by the Next.js team.

解決方案：

升級到 Next.js 15+（如果需要動態功能）
使用 output: 'export' 產生純靜態檔案（如果是靜態網站）

3. Wrangler CLI 的使用

Wrangler 是 Cloudflare 的官方 CLI 工具，可以用來管理 Workers 和 Pages。

# 登入 Cloudflare
npx wrangler login

# 查看帳號資訊
npx wrangler whoami

# 建立 Pages 專案
npx wrangler pages project create <project-name>

# 部署靜態檔案
npx wrangler pages deploy <directory> --project-name=<project-name>

使用 CLI 部署的好處是可以完全控制部署流程，避免 Cloudflare Dashboard 自動偵測框架造成的問題。

4. GitHub Actions 與 Cloudflare 整合

設定 CI/CD 需要兩個 Secrets：

CLOUDFLARE_ACCOUNT_ID：可透過 npx wrangler whoami 取得
CLOUDFLARE_API_TOKEN：在 Cloudflare Dashboard 建立

GitHub Actions workflow 設定：

- name: Deploy to Cloudflare Pages
  uses: cloudflare/wrangler-action@v3
  with:
    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
    command: pages deploy out --project-name=<project-name>

什麼情況該選哪個平台？

選擇 Vercel

使用 Next.js 並需要 SSR、ISR 等動態功能
希望零配置快速部署
團隊已熟悉 Vercel 生態系

選擇 Cloudflare Pages

純靜態網站（部落格、作品集、文件網站）
預期流量較大，需要無限頻寬
已使用 Cloudflare 管理 DNS 或其他服務
想要更細緻地控制部署流程

小結

純靜態網站不需要複雜的 Serverless 架構，直接使用 output: 'export' 產生靜態檔案，部署到任何 CDN 都可以。Cloudflare Pages、GitHub Pages、Netlify 都是很好的選擇。

如果需要 Next.js 的完整功能（SSR、ISR、Middleware 等），Vercel 仍然是最無痛的選擇，畢竟是同一家公司的產品。