Vercel 部署教學：Next.js 專案最佳部署方案

「用 Next.js 做了一個專案，想部署上線，大家都說要用 Vercel，這是什麼？」

簡單說，Vercel 就是 Next.js 的親爸爸。Next.js 這個框架就是 Vercel 公司開發的，所以用 Vercel 部署 Next.js 專案，就像是回家一樣自然順暢。

這篇文章會帶你從零開始，學會用 Vercel 部署 Next.js（以及其他前端框架）專案。從連接 GitHub、設定環境變數、到綁定自訂網域，一步步帶你完成。

Vercel 是什麼？

在開始部署前，先認識一下 Vercel 這個平台。

Vercel 平台介紹

Vercel 是一個專注於前端部署的平台，由 Next.js 的創造者 Guillermo Rauch 創立。Vercel 的核心理念是：

讓前端開發者可以專注在產品，而不是基礎設施。

Vercel 的主要特色：

• 零配置部署：連接 GitHub 後，自動偵測框架並設定 Build
• 全球 Edge Network：在離用戶最近的節點執行程式碼
• Preview Deployments：每個 PR 都有專屬預覽網址
• 與 Next.js 深度整合：所有 Next.js 功能都原生支援

為什麼 Next.js 專案要用 Vercel

雖然 Next.js 可以部署到任何平台，但 Vercel 有幾個獨特優勢：

1. 原生支援所有 Next.js 功能

2. 第一時間支援新功能

Next.js 的新功能通常會先在 Vercel 上測試完善，其他平台可能需要等待一段時間才能完整支援。

3. 效能最佳化

Vercel 的 Edge Network 針對 Next.js 做了大量優化，包括：
- 自動程式碼分割
- 智能快取策略
- 圖片自動優化

Vercel 免費方案限制

Vercel 的 Hobby（免費）方案相當大方：

注意：免費方案不能用於商業專案。如果是公司產品或有營利行為，需要升級到 Pro 方案（$20/月/人）。

想了解更多部署選項，可以參考 程式部署完整指南。

Vercel 部署實戰

接下來一步步帶你完成 Vercel 部署。整個過程通常不到 5 分鐘！

Step 1：註冊 Vercel 帳號

1. 前往 Vercel 官網
2. 點選「Sign Up」
3. 選擇「Continue with GitHub」（推薦）
4. 授權 Vercel 存取你的 GitHub 帳號
5. 選擇 Hobby（免費）方案

Step 2：Import GitHub 專案

1. 登入後，點選「Add New...」→「Project」
2. 在「Import Git Repository」區塊，找到你的專案
3. 如果看不到 repository：
   - 點選「Adjust GitHub App Permissions」
   - 授權 Vercel 存取該 repository
4. 點選專案旁的「Import」按鈕

Vercel 自動偵測框架

Import 後，Vercel 會自動偵測你的專案類型並設定：

大多數情況下，你不需要手動設定任何東西！

Step 3：設定環境變數

如果你的專案需要環境變數（API Key、資料庫連線等）：

1. 在 Import 頁面展開「Environment Variables」區塊
2. 輸入變數名稱和值
3. 選擇要套用的環境（Production / Preview / Development）

NAME                    VALUE
NEXT_PUBLIC_API_URL     https://api.example.com
DATABASE_URL            postgresql://...
SECRET_KEY              your-secret-key

環境變數命名規則

在 Next.js 中：
- NEXT_PUBLIC_ 開頭的變數會暴露給瀏覽器
- 其他變數只能在伺服器端使用

// 瀏覽器可以存取
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

// 只有伺服器可以存取
const dbUrl = process.env.DATABASE_URL;

Step 4：部署與預覽

點選「Deploy」後，Vercel 開始建置：

1. Cloning：複製你的 Git repository
2. Building：執行 Build command
3. Deploying：部署到全球 Edge Network

通常 1-3 分鐘內就會完成。部署成功後會得到：
- Production 網址：https://your-project.vercel.app
- 專案 Dashboard：可以查看部署狀態、日誌、分析

💡 Vercel 部署遇到 Build Error？ 常見的問題包括依賴安裝失敗、環境變數未設定、TypeScript 類型錯誤等。如果你卡關了，讓 VibeFix 幫你排解，我們可以快速找出問題。

Vercel 自訂網域設定

預設的 .vercel.app 網址已經很專業了，但你可能想用自己的網域。

新增自訂網域

1. 進入專案 Dashboard
2. 點選「Settings」→「Domains」
3. 輸入你的網域，例如 www.yourdomain.com
4. 點選「Add」

Vercel 會告訴你需要設定什麼 DNS 記錄。

DNS 設定（A Record / CNAME）

根據你的需求，選擇以下其中一種設定方式：

方式一：Apex Domain（根網域，例如 yourdomain.com）

在你的 DNS 服務商新增 A Record：

Type: A
Name: @
Value: 76.76.21.21

方式二：Subdomain（子網域，例如 www.yourdomain.com）

新增 CNAME Record：

Type: CNAME
Name: www
Value: cname.vercel-dns.com

推薦設定

同時設定 yourdomain.com 和 www.yourdomain.com，Vercel 會自動處理重定向。

SSL 自動設定

設定好 DNS 後，Vercel 會自動：
1. 驗證網域所有權
2. 申請 Let's Encrypt SSL 憑證
3. 設定 HTTPS

整個過程通常幾分鐘內完成，完全不用手動處理憑證！

💡 DNS 設定卡關？ DNS 設定有時候會讓人困惑，尤其是 A Record 和 CNAME 的差別。如果你不確定該怎麼設定，讓 VibeFix 的專家幫你處理。

Vercel 進階功能

Vercel 不只是靜態網站託管，還有很多強大的進階功能。

Edge Functions

Edge Functions 讓你的程式碼在離用戶最近的節點執行，大幅降低延遲。

在 Next.js 中使用 Edge Runtime

// app/api/hello/route.js
export const runtime = 'edge';

export async function GET(request) {
  return new Response(JSON.stringify({
    message: 'Hello from the Edge!',
    region: request.headers.get('x-vercel-ip-country')
  }));
}

Edge Middleware

在請求到達頁面前執行邏輯：

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  // 例如：根據地區重定向
  const country = request.geo?.country;

  if (country === 'TW') {
    return NextResponse.redirect(new URL('/tw', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/',
};

Serverless Functions

在 Next.js 的 API Routes 會自動部署為 Serverless Functions：

// app/api/users/route.js
export async function GET() {
  const users = await fetchUsersFromDB();

  return Response.json(users);
}

export async function POST(request) {
  const data = await request.json();
  const user = await createUser(data);

  return Response.json(user, { status: 201 });
}

免費額度
- 每月 100,000 次調用
- 每次執行最長 10 秒（Hobby 方案）

Analytics & Speed Insights

Vercel 內建兩種分析工具：

Vercel Analytics
- 追蹤頁面訪問量
- 獨立訪客數
- 地理位置分佈

// app/layout.js
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Speed Insights
- 追蹤 Core Web Vitals
- 真實用戶效能數據
- 識別效能瓶頸

import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

Preview Deployments

這是 Vercel 最實用的功能之一！

每個 PR 都有專屬預覽網址

當你開 Pull Request 時，Vercel 會：
1. 自動建置該分支
2. 部署到獨立的預覽 URL
3. 在 PR 中留言通知

這讓團隊可以在合併前先看到改動效果，超級方便！

Preview 網址格式

https://your-project-<hash>-your-username.vercel.app

想比較其他平台，可以參考 Netlify 部署教學。

Vercel 常見問題

部署 Vercel 時最常遇到的問題和解決方法。

Build Error 排解

錯誤訊息

Error: Build failed
Command "npm run build" exited with 1

常見原因與解決方法

1. TypeScript 類型錯誤

Vercel 的 Build 比本機嚴格。確保本機 npm run build 可以通過：
bash npm run build # 修復所有錯誤後再 push

2. ESLint 錯誤

Next.js 預設會在 Build 時執行 ESLint。如果想暫時跳過：
javascript // next.config.js module.exports = { eslint: { ignoreDuringBuilds: true, }, };

3. 依賴安裝問題

確保 package-lock.json 已 commit：
bash git add package-lock.json git commit -m "Add package-lock.json"

4. 記憶體不足

大型專案可能需要增加記憶體：
json // package.json { "scripts": { "build": "NODE_OPTIONS='--max-old-space-size=4096' next build" } }

環境變數問題

問題描述

環境變數在本機可以讀到，但部署後讀不到。

解決方法

1. 確認變數已新增到 Vercel
   - 進入 Settings → Environment Variables
   - 確認變數存在且環境正確

2. 重新部署

新增環境變數後需要重新部署：
- 進入 Deployments
- 點選最新的部署 → Redeploy

3. 確認命名規則
   ```javascript
   // 前端可存取（需要 NEXT_PUBLIC_ 前綴）
   process.env.NEXT_PUBLIC_API_URL // ✅

// 前端讀不到（沒有前綴）
process.env.API_SECRET // ❌ 在瀏覽器是 undefined
```

API Routes 不動作

問題描述

API Route 在本機正常，但部署後回傳 404 或 500。

常見原因

1. 檔案路徑錯誤
   ```
   // 正確（App Router）
   app/api/users/route.js

// 正確（Pages Router）
pages/api/users.js
```

2. 未 export 正確的 HTTP method
   javascript // App Router 需要 export 具名函式 export async function GET() { ... } export async function POST() { ... }

3. Serverless Function 超時

Hobby 方案限制 10 秒，確保 API 不會執行太久。

想了解更多 Node.js 的部署技巧，可以參考 Node.js 部署教學。

FAQ 常見問題

Vercel 免費方案夠用嗎？

對於個人專案和學習用途，免費方案非常夠用：
- 100 GB 頻寬足夠大多數小型網站
- 6000 Build 分鐘可以每天部署多次
- Preview Deployments 完全免費

但如果是商業專案，必須升級到 Pro 方案。

Vercel 和 Netlify 怎麼選？

可以部署非 Next.js 專案嗎？

當然可以！Vercel 支援：
- React（CRA、Vite）
- Vue / Nuxt
- Svelte / SvelteKit
- Angular
- 靜態 HTML
- 更多...

只是 Next.js 會有最完整的支援。

Vercel 會自動更新嗎？

是的！只要你 push 到連接的 Git 分支：
- Push 到 main → 自動部署到 Production
- 開 Pull Request → 自動建立 Preview

如何回滾到前一個版本？

1. 進入「Deployments」頁面
2. 找到想要回滾的部署
3. 點選「...」→「Promote to Production」

整個過程只要幾秒鐘。

Vercel 部署重點整理與平台特性

Vercel 是 Next.js 專案的最佳部署選擇，主要優勢：

• 零配置：連接 GitHub 就自動設定
• 原生支援：所有 Next.js 功能都完整支援
• Preview 部署：每個 PR 都有預覽網址
• 全球 Edge：效能優異

部署流程整理：

重點整理：

1. Next.js 首選 Vercel：同一家公司，支援最完整
2. 善用 Preview 部署：團隊協作利器
3. 注意免費限制：商業專案需付費
4. 環境變數注意前綴：NEXT_PUBLIC_ 才能在瀏覽器存取

🔧 Vercel 部署失敗？ Build Error、環境變數問題、API Routes 不動作...這些都是常見的部署卡關點。如果你遇到問題解決不了，讓 VibeFix 幫你處理，我們對 Vercel 和 Next.js 非常熟悉，可以快速幫你找出問題並解決。