Vercel 免費部署你的 Next.js 個人網站 ─ 新手入門 SEO 教學

想做一個 AI Demo、個人作品集或小型內容網站？Next.js 配合 Vercel 的免費 Hobby 方案，幾分鐘就可以將網站上線，而且天然對 SEO 友善。本文以香港地區用戶習慣為主，帶你由 0 到 1：建立專案、部署到 Vercel、設定基本 SEO、再到提升速度與排名的小技巧。

Vercel 是一個簡單易用的雲端工具，搭配 Next.js（一個建立現代網站的技術框架），能讓你的網站既快速又穩定，同時非常容易管理。無論你經營什麼類型的生意，建立網站都是必要的一步，而使用 Vercel 能有效幫你節省時間和精力！

Vercel 是什麼？

Vercel 是一個雲端平台，幫你把網站或應用程式快速上線。它就像一個「網站管家」，負責處理複雜的技術問題，讓你專注在生意上。

• 簡單來說：你把網站程式碼（如 Next.js 網頁）上傳到 Vercel，它會自動將網站分發到全球伺服器網絡，讓用戶無論在香港、台灣或世界各地都能快速瀏覽。
• 適合對象：中小企、個人創業者、行銷團隊，以及任何希望以低成本建立專業網站的人士。
• 實例：如你經營香港網店，Vercel 能確保商品頁面即時載入，並能從容應付節日購物高峰期的流量暴增！

為何選擇 Next.js + Vercel？

• Next.js 提供多種渲染模式：靜態生成(SSG)、伺服器端渲染(SSR)、增量靜態再生(ISR)，能輸出完整 HTML，大幅提升搜尋引擎索引效果。
• Vercel 由 Next.js 官方團隊開發，提供一鍵部署、全球 CDN 分發、部署預覽連結、自動圖片優化等功能，非常適合新手使用。
• Vercel 免費 Hobby 方案提供每月 100GB 傳輸量、100 小時建置運行時間、每日 100 次部署限額，完全足夠個人項目或學習用途。

靜態網站免費主機大比拼：GitHub Pages、Netlify、Cloudflare、Vercel、Kinsta 全面比較

逐步部署至 Vercel（新手指南）

• 建立 Next.js 專案
  • 使用最新的 App Router（Next.js 13+）：

npx create-next-app@latest my-app
cd my-app
npm run dev

• 初始化 Git 並推到 GitHub

git init
git add .
git commit -m "init"
git branch -M main
git remote add origin https://github.com/<你的帳號>/my-app.git
git push -u origin main

• 連接 Vercel
  • 到 vercel.com 用 GitHub 登入，Import 你的 repo。
  • Framework 選 Next.js，按 Deploy 即可。
  • 每次 push 都會自動建置並產生預覽網址，合併到 main 後會更新正式站。
• 設定自訂網域與 HTTPS
  • 在 Vercel 專案設定加入你的網域，例如 www.example.hk，跟隨指示於 DNS 供應商加上記錄，Vercel 會自動簽發 SSL。

小貼士：

• DNS 設定於本地域名註冊商（例如 .hk）需要一點時間傳播，耐心等候 5–30 分鐘不等。
• 若網站面向香港用戶，可在 Vercel 專案 Analytics 留意香港節點的速度表現。

Vercel 免費方案 Hobby Plan

• 每月包含 100GB 快速傳輸、100 小時 Build 執行、每日最多 100 次部署、單一並行建置。[1][2]
• 專案上限 200 個、CLI 每週建立部署上限 2000、靜態檔單檔上傳 100MB、Build 最長 45 分鐘。[2]
• 超出免費額度需等重置週期或升級 Pro。若網站流量開始增長，可再考慮升級。[1]