PSheon's Lab

零成本持續部署

如何用 Vercel 免費部署你的 Next.js APP

你有沒有試過這種痛苦：每次更新網站，都要打開終端機，輸入一堆指令，連進伺服器，手動上傳檔案，然後發現哪裡炸了，又要重來一次？

如果這聽起來像你的日常，那麼歡迎來到 21 世紀！現在有 Vercel 這種神器，可以讓你的 Next.js 應用每次 push 程式碼就自動部署，完全不需要手動操作！重點是：完全免費！

🎩 Vercel：讓部署變成魔法

如果你正在用 Next.js 開發網站，那 Vercel 基本上就是你的最佳拍檔。為什麼呢？

✅ 完全免費（對於個人或小型專案來說，免費版已經超夠用）
✅ 自動部署（push 到 GitHub，Vercel 幫你上線，完全免手動）
✅ 超快全球 CDN（讓你的網站在世界各地飛快加載，除非你網站是賣烏龜的）
✅ 內建 Serverless API（你可以用 Edge Functions 來寫後端 API，完全不需要維護伺服器）
✅ 自動預覽（開發新功能時，每個 PR 會自動產生一個預覽網址，測試超方便）
✅ 一鍵回滾（如果哪次部署炸了，不用緊張，一鍵回到上一個版本）

🔧 如何用 Vercel 部署你的 Next.js App（不用 5 分鐘！）

步驟 1：先來個 Next.js 專案

如果你還沒有 Next.js 專案，先創建一個：


npx create-next-app@latest my-next-app
cd my-next-app
git init
git add .
git commit -m "Initial commit"

步驟 2：把程式碼推到 GitHub


git remote add origin https://github.com/your-username/my-next-app.git
git branch -M main
git push -u origin main

步驟 3：在 Vercel 上點幾下，網站就上線！

前往 Vercel 官網註冊帳號（可以用 GitHub 登入）
點擊「New Project」，選擇剛剛上傳的 GitHub 專案
點擊「Deploy」，等待幾秒鐘，你的網站就上線了！🎉

恭喜，你剛剛體驗了零手動操作的魔法！ 🪄

⚙️ 進階設定（讓你的部署更專業）

1️⃣ 設定環境變數

如果你的應用需要 API Key 或其他環境變數，不要寫在 .env 裡，直接在 Vercel 設定：

打開 Vercel 的「Settings」→「Environment Variables」
新增 NEXT_PUBLIC_API_URL=https://api.example.com
重新部署，讓前端讀取正確的 API 地址

2️⃣ 自動預覽，每個 PR 都有專屬網址

當你對網站進行新功能開發時，每當開一個 Pull Request，Vercel 會自動幫你創建一個獨立的測試網址！這樣你可以：

讓團隊或客戶先預覽，不用影響正式網站
測試不同版本，確保不會把 Bug 推上線

3️⃣ Edge Functions（寫 API，但不用伺服器）

Vercel 內建 Edge Functions，讓你可以直接在前端專案裡寫 API，根本不需要自己架後端！

例如，在 📁 /app/api/hello/route.ts 裡寫這樣的程式碼：


import { NextResponse } from "next/server";
 
export async function GET() {
  return NextResponse.json({ message: "Hello from Vercel API with App Router!" });
}

部署後，你的 API 就能透過 https://your-vercel-app.vercel.app/api/hello 訪問，這是不是超酷？

🔄 Vercel 自動部署的魔法

當你 push 程式碼到 GitHub 時，Vercel 會自動觸發以下流程：

1️⃣ 偵測變更（Vercel 監聽 GitHub，看到你 push 程式碼後立刻行動）
2️⃣ 自動建置（幫你運行 npm install 和 npm run build，完全不用手動）
3️⃣ 自動部署（把你的網站推上 Vercel 的 CDN，全球瞬間更新）
4️⃣ 發布成功通知（你可以在 Slack 或 Email 看到部署結果）

你只要寫程式碼，Vercel 會自動處理剩下的事！

🎯 結論：部署 Next.js，Vercel 才是最佳解！

如果你還在用傳統方式部署網站，那你真的該試試 Vercel！不但完全免費，而且超快、超方便，還有全球 CDN，讓你的網站像火箭一樣快！🚀

還不趕快試試？現在就上 vercel.com 部署你的 Next.js App 吧！ 🎉