建立 2026-09-16 更新 2026-09-16

部署上線

寫好的 Next.js 專案要讓別人看到，需要建置成正式環境版本並部署到伺服器上。Next.js 的建立者同時也維護 Vercel 這個平台，兩者搭配幾乎是零設定，這一頁以 Vercel 為主，並簡單提一下自行架站的做法。

建置指令

部署前先在本機確認建置沒有問題：

npm run build   # 產出最佳化後的正式環境版本，會列出每個路由是靜態還是動態
npm run start   # 以正式環境模式本機啟動，驗證建置結果

next build 的輸出會標示每個路由的渲染方式（靜態、動態或 ISR），部署前先看一眼，確認跟預期一致。

部署到 Vercel

1. 把專案推上 GitHub（或 GitLab、Bitbucket）。
2. 到 vercel.com 用 Git 帳號登入，選擇「Import Project」，選取這個 repo。
3. Vercel 會自動偵測是 Next.js 專案並帶入建置指令，通常不需要更改任何設定，直接按下 Deploy。
4. 建置完成後會拿到一個 *.vercel.app 網址，之後也能在專案設定裡綁定自訂網域。

之後每次 git push 到預設分支，Vercel 都會自動重新建置並更新正式環境；推送到其他分支或開 Pull Request，則會自動產生獨立的預覽部署（Preview Deployment）網址，方便在合併前先讓團隊或客戶看到實際效果。

環境變數

資料庫連線字串、API 金鑰等機密資料不要寫死在程式碼裡，改用環境變數：

DATABASE_URL="postgres://..."

• .env.local 只在本機開發使用，必須加進 .gitignore，不能提交到版本控制。
• 部署到 Vercel 時，到專案的 Settings → Environment Variables 另外設定正式環境的值。
• 只有名稱以 NEXT_PUBLIC_ 開頭的變數才會被打包進瀏覽器端程式碼；其餘變數只在伺服器端可用，這是刻意的安全設計，避免機密外洩。

自行架站（可選）

不透過 Vercel 也可以自行架設，常見做法：

npm run build
npm run start   # 需要一台持續執行 Node.js 的伺服器

或者在 next.config.ts 設定 output: "standalone"，產出精簡過、適合放進 Docker 映像檔的獨立執行檔。自行架站需要自己處理伺服器維運、擴展與 HTTPS 憑證，對大多數專案來說，Vercel 的免費額度與自動化流程通常已經足夠。

推薦影音

官方：部署到 Vercel

簡述：Vercel 官方頻道示範從 Git 專案到上線只需要幾個步驟，並說明範本、CLI 兩種部署方式的差異，適合第一次部署 Next.js 專案時跟著操作。

想認識唯客學院，請看 關於我們。