Vercel 自訂網域設定完整教學｜2025 DNS 設定指南

部署到 Vercel 後，你會得到 xxx.vercel.app 的網址。

但如果想用自己的網域呢？

設定自訂網域，讓你的網站看起來更專業。

這篇文章教你如何完整設定 Vercel 自訂網域。

準備工作

你需要什麼？

1. 已部署的 Vercel 專案
2. 一個網域名稱（可以先購買或使用現有的）

網域在哪裡買？

常見網域註冊商：

購買建議：

• .com 是最通用的選擇
• 避免太長或難記的網域
• 注意續費價格（首年優惠可能很便宜）

新增網域到 Vercel

步驟一：進入專案設定

1. 登入 Vercel Dashboard
2. 選擇你的專案
3. 點擊 Settings
4. 選擇 Domains

步驟二：新增網域

1. 在輸入框輸入你的網域（如 example.com）
2. 點擊 Add

步驟三：選擇設定方式

Vercel 會顯示兩個選項：

選項 A：使用 A Record

Type: A
Name: @（或留空）
Value: 76.76.21.21

選項 B：使用 CNAME（推薦子網域）

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

DNS 設定方法

Cloudflare DNS 設定

1. 登入 Cloudflare Dashboard
2. 選擇你的網域
3. 點擊 DNS
4. 新增記錄：

根網域（example.com）：

Type: A
Name: @
Content: 76.76.21.21
Proxy status: DNS only（灰色雲朵）

www 子網域：

Type: CNAME
Name: www
Content: cname.vercel-dns.com
Proxy status: DNS only（灰色雲朵）

注意： 必須關閉 Cloudflare Proxy（橘色雲朵改成灰色），否則 SSL 會有問題。

Namecheap DNS 設定

1. 登入 Namecheap
2. 進入 Domain List
3. 點擊網域旁的 Manage
4. 選擇 Advanced DNS
5. 新增 Host Records：

Type: A Record
Host: @
Value: 76.76.21.21
TTL: Automatic

Type: CNAME Record
Host: www
Value: cname.vercel-dns.com
TTL: Automatic

GoDaddy DNS 設定

1. 登入 GoDaddy
2. 進入 My Products
3. 點擊 DNS
4. 新增記錄：

Type: A
Name: @
Value: 76.76.21.21

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

Google Domains / Squarespace DNS 設定

1. 登入 Squarespace Domains
2. 選擇網域
3. 進入 DNS Settings
4. 新增自訂記錄

SSL 憑證

自動 SSL

Vercel 會自動為你的網域申請和更新 SSL 憑證。

設定正確後：

1. Vercel 自動向 Let's Encrypt 申請憑證
2. 大約 5-10 分鐘後生效
3. 自動更新，無需手動管理

SSL 狀態檢查

在 Vercel Dashboard → Domains，你會看到：

SSL 問題排解

問題：SSL 憑證沒有生效

1. 確認 DNS 已正確設定
2. 等待 DNS 傳播（最多 48 小時）
3. 如果用 Cloudflare，關閉 Proxy

問題：Mixed Content 警告

<!-- 確保所有資源都用 https -->

<!-- ❌ 不好 -->
<img src="http://example.com/image.png">

<!-- ✅ 好 -->
<img src="https://example.com/image.png">

<!-- ✅ 最好（相對協定）-->
<img src="//example.com/image.png">

根網域 vs www

設定建議

方式一：根網域為主

example.com → 主網站
www.example.com → 重導向到 example.com

方式二：www 為主

www.example.com → 主網站
example.com → 重導向到 www.example.com

在 Vercel 設定重導向

Vercel 會自動處理重導向。

當你新增兩個網域時：

1. example.com
2. www.example.com

Vercel 會問你哪個是主要的，另一個會自動重導向。

手動設定重導向

// vercel.json
{
  "redirects": [
    {
      "source": "/:path*",
      "has": [
        {
          "type": "host",
          "value": "www.example.com"
        }
      ],
      "destination": "https://example.com/:path*",
      "permanent": true
    }
  ]
}

子網域設定

常見子網域

設定子網域

步驟一：在 Vercel 新增

1. Vercel Dashboard → 專案 → Settings → Domains
2. 新增 blog.example.com

步驟二：設定 DNS

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

多專案使用同一網域

你可以把不同子網域指向不同專案：

example.com      → 專案 A（主網站）
blog.example.com → 專案 B（部落格）
api.example.com  → 專案 C（API）

每個專案分別在 Settings → Domains 新增對應的子網域。

Wildcard 網域

什麼是 Wildcard？

Wildcard 網域可以匹配任何子網域：

*.example.com

這會匹配：

• blog.example.com
• app.example.com
• anything.example.com

設定 Wildcard（Pro 方案）

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

注意： Wildcard 網域需要 Vercel Pro 方案。

Wildcard 的用途

• 動態子網域（如 user123.example.com）
• 多租戶應用
• Preview 部署

進階設定

自訂 404 頁面

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h1>404 - 頁面不存在</h1>
      <a href="/">回首頁</a>
    </div>
  );
}

設定 Canonical URL

// app/layout.tsx
export const metadata = {
  metadataBase: new URL('https://example.com'),
  alternates: {
    canonical: '/',
  },
};

強制 HTTPS

Vercel 預設就會強制 HTTPS，但你也可以明確設定：

// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains"
        }
      ]
    }
  ]
}

設定安全標頭

// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    }
  ]
}

常見問題排解

問題一：DNS 沒有生效

可能原因：

1. DNS 尚未傳播（最多 48 小時）
2. DNS 記錄設定錯誤
3. 有舊的 DNS 記錄衝突

檢查方法：

# 檢查 A 記錄
dig example.com A

# 檢查 CNAME 記錄
dig www.example.com CNAME

# 線上工具
# https://dnschecker.org/

解決方法：

1. 確認 DNS 記錄正確
2. 刪除衝突的舊記錄
3. 等待傳播

問題二：Invalid Configuration

Vercel 顯示 Invalid Configuration 通常是因為：

1. DNS 記錄指向錯誤的 IP
2. CNAME 值不正確
3. DNS 還沒傳播

檢查清單：

• [ ] A 記錄指向 76.76.21.21
• [ ] CNAME 指向 cname.vercel-dns.com
• [ ] 沒有衝突的記錄
• [ ] Cloudflare Proxy 已關閉

問題三：SSL 錯誤

常見錯誤：

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

解決方法：

1. 如果用 Cloudflare，確保 Proxy 關閉
2. 等待 Vercel SSL 憑證生效
3. 清除瀏覽器快取

問題四：重導向循環

錯誤訊息：

ERR_TOO_MANY_REDIRECTS

可能原因：

1. Cloudflare Proxy + Vercel 衝突
2. 重導向設定衝突

解決方法：

// 檢查 vercel.json 的重導向設定
{
  "redirects": [
    // 確保沒有循環
  ]
}

問題五：網域已被其他帳號使用

錯誤訊息：

This domain is already in use by another Vercel account

解決方法：

1. 確認你擁有這個網域
2. 在 DNS 新增驗證記錄

Type: TXT
Name: _vercel
Value: vc-domain-verify=xxxx

轉移網域到 Vercel

Vercel 可以管理 DNS

除了用第三方 DNS，你也可以把 DNS 轉到 Vercel：

1. 在 Vercel Dashboard 點擊 Domains（全域設定，不是專案）
2. 新增網域
3. 將 Nameservers 改為 Vercel 提供的

Vercel Nameservers：

ns1.vercel-dns.com
ns2.vercel-dns.com

優點

• 所有設定都在 Vercel
• 更快的 DNS 解析
• 自動 SSL

缺點

• 失去第三方 DNS 功能（如 Cloudflare CDN）

網域設定最佳實踐

1. 使用適當的 TTL

TTL: 300（5 分鐘）- 適合開發階段
TTL: 3600（1 小時）- 適合穩定網站
TTL: 86400（1 天）- 適合不常變動的記錄

2. 設定 www 和非 www

同時設定兩個，並選擇一個作為主要：

example.com（主）
www.example.com（重導向）

3. 備份 DNS 設定

在做任何改動前，記錄目前的設定。

4. 逐步遷移

如果從舊網站遷移：

1. 先在 Vercel 部署並測試
2. 降低 TTL 到最短
3. 更改 DNS
4. 確認正常後恢復 TTL

5. 監控網域到期

設定網域自動續費或提醒，避免網域過期。

常見問題 FAQ

Q1：設定網域需要多久？

DNS 傳播通常需要 10 分鐘到 48 小時。

大多數情況下 1 小時內就會生效。

Q2：可以用免費網域嗎？

可以，但不建議用於正式專案。

免費網域（如 .tk、.ml）可能：

• 被搜尋引擎降權
• 隨時被收回
• 看起來不專業

Q3：一個網域可以指向多個專案嗎？

根網域只能指向一個專案。

但可以用不同子網域指向不同專案。

Q4：網域過期會怎樣？

• 網站會無法訪問
• 可能被他人註冊
• 需要支付較高的贖回費用

建議設定自動續費。

Q5：如何轉移網域到其他註冊商？

1. 解鎖網域
2. 取得 Authorization Code
3. 在新註冊商發起轉移
4. 確認轉移郵件

Vercel 部署失敗？

Build Error、環境變數、自訂網域，我們幫你快速排除問題。

解決 Vercel 問題

延伸閱讀

• Vercel 是什麼？2025 完整教學｜從入門到部署一次搞懂
• Vercel 部署教學｜從 GitHub 到上線只要 5 分鐘
• Vercel 環境變數設定完整教學
• Vercel Preview 部署完整教學
• Vercel 500/502/503/504 錯誤排解大全