如何部署靜態網站(免費資源) — Next.js

TL;DR

Next.js 部署選擇:Vercel(母公司,零設定,動態功能完整)、Cloudflare Pages(全球 edge,免費額度大)、GitHub Pages(只能靜態 export)、自架(VPS / Docker)。2026 年首選 Vercel,需要極大流量或 edge 場景考慮 Cloudflare。

Next.js 部署選擇對比

選擇	動態功能	免費額度	設定難度
Vercel	✅ 完整(SSR / ISR / API / Middleware)	100GB 頻寬	⭐ 零設定
Cloudflare Pages	✅ 大部分(透過 Workers)	無限請求	⭐⭐
Netlify	✅ 大部分	100GB 頻寬	⭐⭐
GitHub Pages	❌ 只能靜態 export	100GB 頻寬	⭐⭐
==自架(VPS + Docker)	✅ 完整	(要錢)	⭐⭐⭐⭐

為什麼選 Vercel

Vercel 是 Next.js 的母公司,部署體驗是業界最好之一:

1. push 到 GitHub
2. Vercel 自動 build
3. 自動部署
4. 自動 preview deploy(每個 PR 一個 URL)
5. 自動 SSL
6. 自動 CDN

整個流程零設定,連 Dockerfile 都不用寫。

部署步驟

# 方法 1:GUI
# 1. 去 vercel.com
# 2. Import GitHub repo
# 3. 點 Deploy
# 完成

# 方法 2:CLI
npm i -g vercel
cd my-nextjs-project
vercel              # 跟著 prompt 走,2 分鐘起站
vercel --prod       # 部署 production

bash

Vercel 內建優化

功能	說明
Automatic SSL	Let's Encrypt 自動續
Edge Network	全球 100+ POP
Image Optimization	`next/image` 走 Vercel,自動 WebP/AVIF
Font Optimization	`next/font` 走 Vercel CDN
Preview Deployments	每個 PR 一個獨立 URL,reviewer 可以看
Analytics	內建 Web Vitals 監控
Speed Insights	RUM 真實使用者效能

Vercel vs GitHub 角色差異

很多人搞混 Vercel 跟 GitHub。它們互補不衝突:

維度	GitHub	Vercel
角色	程式碼倉儲	前端應用部署平台
收費	Public repo 免費	個人 / hobby 免費
主要功能	版本控制 + 協作	build + deploy + 託管
適合	所有專案	現代 Web App
自定義程度	高	低(trade off:換最佳預設值)

典型流程:

寫 code → push GitHub → Vercel webhook 接到 → build → deploy → URL 出來

兩者搭配才是現代前端部署 pipeline。

Cloudflare Pages(2026 強推)

免費額度比 Vercel 大很多:

無限請求數 / 500 build/月 / 不限頻寬

適合:

流量大(免頻寬限制)
需要 Cloudflare Workers 配合(KV / R2 / D1 / Durable Objects)
想用其他 framework(Astro / SvelteKit / Remix)

# 部署 Next.js 到 Cloudflare Pages
npm install --save-dev @cloudflare/next-on-pages

bash

// next.config.js
module.exports = {
  // 用 Edge Runtime
  experimental: { runtime: 'edge' },
};

javascript

# build & deploy
npx @cloudflare/next-on-pages
npx wrangler pages deploy .vercel/output/static

bash

陷阱:

SSR 要走 Edge Runtime,不能用所有 Node.js API
Image Optimization 要自己處理(沒有 Vercel 的內建)

GitHub Pages(只能靜態)

Next.js 走 GitHub Pages 必須做 static export:

// next.config.js
module.exports = {
  output: 'export',          // ⭐ 靜態 export
  images: {
    unoptimized: true,       // ⭐ 沒 Vercel,圖片優化關掉
  },
  basePath: '/my-repo',      // ⭐ 部署到 user.github.io/my-repo
  assetPrefix: '/my-repo/',
};

javascript

限制:

❌ 沒 SSR / ISR / API Routes
❌ 沒 Middleware
❌ next/image 要關掉優化
❌ 沒 dynamic route 帶 server data
✅ 純 SSG 部落格 / 文件 OK

配 GitHub Actions 部署(詳見 React專案無法正常Github Action):

- run: npm run build
- uses: actions/upload-pages-artifact@v3
  with:
    path: ./out                # ⭐ Next.js 靜態 export 在 out/
- uses: actions/deploy-pages@v4

yaml

自架(VPS + Docker)

需要完全控制 / 客製化 / 不想 vendor lock-in:

# Dockerfile
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

EXPOSE 3000
CMD ["node", "server.js"]

dockerfile

// next.config.js
module.exports = {
  output: 'standalone',      // ⭐ 產生最小化的 Node.js server
};

javascript

# 部署到任何 Linux VPS
docker build -t my-app .
docker run -p 3000:3000 my-app

# 配 Caddy 反向代理 + SSL
caddy reverse-proxy --from yourdomain.com --to localhost:3000

bash

適合:

完全控制 server 環境
已有 VPS 想多塞東西
規避 Vercel 流量限制

代價:

自己負責更新、監控、SSL、scaling
沒有 preview deploy 等便利功能

部署平台選型決策樹

你寫 Next.js 嗎?
├── 是 → 流量大?
│       ├── 否(< 50K MAU)→ ==Vercel==(zero config)
│       └── 是 → ==Cloudflare Pages==(無頻寬限制)
│
└── 否(其他 framework / 純靜態)
    └── 想簡單 → ==Cloudflare Pages== / ==Netlify==

進階:多環境部署

# .github/workflows/deploy.yml
on:
  push:
    branches: [main, staging]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run build
      - name: Deploy to Vercel
        run: npx vercel --token ${{ secrets.VERCEL_TOKEN }} ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

yaml

main → production、staging branch → preview,完全自動化。

如何部署靜態網站(免費資源) — Next.js

TL;DR

Next.js 部署選擇:Vercel(母公司,零設定,動態功能完整)、Cloudflare Pages(全球 edge,免費額度大)、GitHub Pages(只能靜態 export)、自架(VPS / Docker)。2026 年首選 Vercel,需要極大流量或 edge 場景考慮 Cloudflare。

Next.js 部署選擇對比

選擇	動態功能	免費額度	設定難度
Vercel	✅ 完整(SSR / ISR / API / Middleware)	100GB 頻寬	⭐ 零設定
Cloudflare Pages	✅ 大部分(透過 Workers)	無限請求	⭐⭐
Netlify	✅ 大部分	100GB 頻寬	⭐⭐
GitHub Pages	❌ 只能靜態 export	100GB 頻寬	⭐⭐
==自架(VPS + Docker)	✅ 完整	(要錢)	⭐⭐⭐⭐

為什麼選 Vercel

Vercel 是 Next.js 的母公司,部署體驗是業界最好之一:

1. push 到 GitHub
2. Vercel 自動 build
3. 自動部署
4. 自動 preview deploy(每個 PR 一個 URL)
5. 自動 SSL
6. 自動 CDN

整個流程零設定,連 Dockerfile 都不用寫。

部署步驟

# 方法 1:GUI
# 1. 去 vercel.com
# 2. Import GitHub repo
# 3. 點 Deploy
# 完成

# 方法 2:CLI
npm i -g vercel
cd my-nextjs-project
vercel              # 跟著 prompt 走,2 分鐘起站
vercel --prod       # 部署 production

bash

Vercel 內建優化

功能	說明
Automatic SSL	Let's Encrypt 自動續
Edge Network	全球 100+ POP
Image Optimization	`next/image` 走 Vercel,自動 WebP/AVIF
Font Optimization	`next/font` 走 Vercel CDN
Preview Deployments	每個 PR 一個獨立 URL,reviewer 可以看
Analytics	內建 Web Vitals 監控
Speed Insights	RUM 真實使用者效能

Vercel vs GitHub 角色差異

很多人搞混 Vercel 跟 GitHub。它們互補不衝突:

維度	GitHub	Vercel
角色	程式碼倉儲	前端應用部署平台
收費	Public repo 免費	個人 / hobby 免費
主要功能	版本控制 + 協作	build + deploy + 託管
適合	所有專案	現代 Web App
自定義程度	高	低(trade off:換最佳預設值)

典型流程:

寫 code → push GitHub → Vercel webhook 接到 → build → deploy → URL 出來

兩者搭配才是現代前端部署 pipeline。

Cloudflare Pages(2026 強推)

免費額度比 Vercel 大很多:

無限請求數 / 500 build/月 / 不限頻寬

適合:

流量大(免頻寬限制)
需要 Cloudflare Workers 配合(KV / R2 / D1 / Durable Objects)
想用其他 framework(Astro / SvelteKit / Remix)

# 部署 Next.js 到 Cloudflare Pages
npm install --save-dev @cloudflare/next-on-pages

bash

// next.config.js
module.exports = {
  // 用 Edge Runtime
  experimental: { runtime: 'edge' },
};

javascript

# build & deploy
npx @cloudflare/next-on-pages
npx wrangler pages deploy .vercel/output/static

bash

陷阱:

SSR 要走 Edge Runtime,不能用所有 Node.js API
Image Optimization 要自己處理(沒有 Vercel 的內建)

GitHub Pages(只能靜態)

Next.js 走 GitHub Pages 必須做 static export:

// next.config.js
module.exports = {
  output: 'export',          // ⭐ 靜態 export
  images: {
    unoptimized: true,       // ⭐ 沒 Vercel,圖片優化關掉
  },
  basePath: '/my-repo',      // ⭐ 部署到 user.github.io/my-repo
  assetPrefix: '/my-repo/',
};

javascript

限制:

❌ 沒 SSR / ISR / API Routes
❌ 沒 Middleware
❌ next/image 要關掉優化
❌ 沒 dynamic route 帶 server data
✅ 純 SSG 部落格 / 文件 OK

配 GitHub Actions 部署(詳見 React專案無法正常Github Action):

- run: npm run build
- uses: actions/upload-pages-artifact@v3
  with:
    path: ./out                # ⭐ Next.js 靜態 export 在 out/
- uses: actions/deploy-pages@v4

yaml

自架(VPS + Docker)

需要完全控制 / 客製化 / 不想 vendor lock-in:

# Dockerfile
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

EXPOSE 3000
CMD ["node", "server.js"]

dockerfile

// next.config.js
module.exports = {
  output: 'standalone',      // ⭐ 產生最小化的 Node.js server
};

javascript

# 部署到任何 Linux VPS
docker build -t my-app .
docker run -p 3000:3000 my-app

# 配 Caddy 反向代理 + SSL
caddy reverse-proxy --from yourdomain.com --to localhost:3000

bash

適合:

完全控制 server 環境
已有 VPS 想多塞東西
規避 Vercel 流量限制

代價:

自己負責更新、監控、SSL、scaling
沒有 preview deploy 等便利功能

部署平台選型決策樹

你寫 Next.js 嗎?
├── 是 → 流量大?
│       ├── 否(< 50K MAU)→ ==Vercel==(zero config)
│       └── 是 → ==Cloudflare Pages==(無頻寬限制)
│
└── 否(其他 framework / 純靜態)
    └── 想簡單 → ==Cloudflare Pages== / ==Netlify==

進階:多環境部署

# .github/workflows/deploy.yml
on:
  push:
    branches: [main, staging]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run build
      - name: Deploy to Vercel
        run: npx vercel --token ${{ secrets.VERCEL_TOKEN }} ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

yaml

main → production、staging branch → preview,完全自動化。

如何布置靜態網站 (免費資源) ⇒ Next.js

如何部署靜態網站(免費資源) — Next.js

Next.js 部署選擇對比

為什麼選 Vercel

部署步驟

Vercel 內建優化

Vercel vs GitHub 角色差異

Cloudflare Pages(2026 強推)

GitHub Pages(只能靜態)

自架(VPS + Docker)

部署平台選型決策樹

進階:多環境部署

目錄

如何布置靜態網站 (免費資源) ⇒ Next.js

如何部署靜態網站(免費資源) — Next.js

Next.js 部署選擇對比

為什麼選 Vercel

部署步驟

Vercel 內建優化

Vercel vs GitHub 角色差異

Cloudflare Pages(2026 強推)

GitHub Pages(只能靜態)

自架(VPS + Docker)

部署平台選型決策樹

進階:多環境部署

目錄