NEXT.JS / DEPLOY

如何在 Vercel 以外部署 Next.js?

比較五種平台,了解 Node.js 部署步驟

Next.js 應用程式可以部署到 Render、Railway、Google Cloud Run、Cloudflare 或 KamuiDash。先確認哪些功能需要在建置完成後執行,再比較平台能否支援,以及有哪些設定要自行處理。

本文內容

先選執行方式,再選部署平台

選擇部署方式 · 概念圖
靜態匯出提供建置產生的 HTML
Node.js 或容器處理傳入的請求
Workers檢查執行環境的相容性
先從應用程式需要的功能縮小範圍。

如果所有路由都能在建置時產生,可以設定 output: 'export'、執行 next build,再部署 out/ 目錄。若功能需要在請求時讀取 Cookie,或使用增量靜態再生(ISR),就要採用其他方式。請用官方文件核對應用程式使用的功能。Next.js 靜態匯出的限制

需要在每次請求時驗證身分或讀取資料庫的頁面,可以用 Node.js 伺服器執行,也可以把伺服器包進容器。Cloudflare Workers 採用不同的執行環境,移轉前要確認相容性。Next.js 部署指南

比較 5 種 Vercel 替代方案

平台 部署方式 適用情境 先確認
Render Node.js Web 服務或靜態網站 想依功能選擇執行伺服器或部署靜態產物 資源與免費 Web 服務的閒置休眠條件
Railway 從原始碼建置與部署 想由平台自動偵測建置及啟動指令 自訂指令、環境變數與用量費用
Google Cloud Run 執行容器,也支援從原始碼部署 想整合既有的 Google Cloud 專案 IAM、帳務、區域、執行個體上限與資料庫連線
Cloudflare Workers 調整應用程式以配合 Workers 想使用 Workers 的執行環境或繫結 vinext 的 beta 狀態及功能與套件相容性
KamuiDash Node.js Web 伺服器 想在東京區域透過 GitHub 部署並使用託管 PostgreSQL Node.js 版本、建置設定、CPU、記憶體與總費用

比較 Node.js 平台時,可從區域、休眠條件、建置與執行資源、資料庫位置和持續費用著手。Cloud Run 支援直接從原始碼建置,不必自備 Dockerfile。設定自動擴縮時,一起評估啟動延遲與多個執行個體的資料庫連線數。

Cloudflare 官方建議在 Workers 上使用 vinext。它在 Vite 上實作 Next.js API,2026 年 11 月 2 日查閱文件時仍處於 beta。可用 npx vinext check 搭配相容性表確認。若既有 OpenNext 應用程式遇到相容性問題,官方仍提供 OpenNext 指南。若只需部署靜態匯出,可參考 Cloudflare Pages。

移轉前列出目前使用的功能,例如伺服器端渲染、Route Handlers、Server Actions、圖片最佳化與 ISR。接著確認資料庫和外部 API 的連線、建置與執行時環境變數、預覽環境、監控與整體費用。使用中的 Vercel 專屬服務也需要安排替代方案。

在本機建置並啟動 Node.js 範例

下載範例,把內容放在儲存庫根目錄。這個 App Router 範例顯示頁面產生時間和兩個標籤,沒有資料庫或登入功能。範例固定使用 Next.js 16.4.3,需要 Node.js 20.9 以上。也要確認部署平台的 Node.js 版本。

固定版本用於重現本機驗證。公開範例前,請查閱 Next.js 2026 年 11 月安全更新公告,將 Next.js 和鎖定檔更新至已修補的版本,再重新建置。

Text
{
  "name": "next-node-hosting-demo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev -H 0.0.0.0",
    "build": "next build",
    "start": "next start -H 0.0.0.0"
  },
  "dependencies": {
    "next": "16.4.3",
    "react": "19.2.0",
    "react-dom": "19.2.0"
  },
  "engines": { "node": ">=20.9.0" }
}

執行正式環境使用的建置與啟動指令。Next.js CLI 支援透過 PORT 指定監聽連接埠。

Terminal
npm ci
NEXT_PUBLIC_DEMO_LABEL='build-example' npm run build
PORT=3000 DEMO_SERVER_MESSAGE='runtime-example' npm run start

開啟 http://127.0.0.1:3000/ 與 /healthz。首頁會顯示時間與標籤,後者應回傳 {"ok":true}。重新整理首頁可看到時間改變。

Text
export const dynamic = 'force-dynamic';
export default function Page() {
  return <main><h1>Next.jsをNode.jsで動かす</h1><p>このページはリクエスト時にサーバーで描画します。</p><p>生成時刻:{new Date().toISOString()}</p><p>公開用ラベル:{process.env.NEXT_PUBLIC_DEMO_LABEL || '未設定'}</p><p>サーバー専用の設定:{process.env.DEMO_SERVER_MESSAGE || '未設定'}</p></main>;
}

區分建置時與執行時的環境變數

讀取變數的時機 · 概念圖
建置時把公開值寫入產物
執行時由伺服器讀取環境變數
回應時回傳 HTML 或 JSON 包含的值
回應中的值會送到用戶端。

直接引用的 NEXT_PUBLIC_ 變數會在建置時寫入產物,變更後需要重新建置。靜態產生的頁面也可能在建置時讀取伺服器端變數。依程式碼的執行時機確認平台何時提供這些值。Next.js 自行託管指南

範例的建置標籤可省略,畫面會顯示未設定。DEMO_SERVER_MESSAGE 是可以公開的示範文字。密碼、金鑰與連線資訊應留在伺服器端,避免放入 HTML 或 JSON 回應。

在 KamuiDash 設定 Node.js 範例

KAMUIDASH · 畫面截圖
KamuiDash 應用程式建立畫面,可選擇執行語言與 GitHub 儲存庫。
新增 Web 伺服器時選擇 Node.js。畫面取自既有的公開範例。
設定 值
應用程式類型 Web 伺服器/Node.js
根目錄 package.json 在儲存庫根目錄時留空
安裝指令 npm ci && npm run build
啟動前指令 留空
啟動指令 npm run start
健康檢查 /healthz
執行時環境變數 DEMO_SERVER_MESSAGE(選填)

若使用 monorepo,請指定包含應用程式 package.json 的目錄。若你的應用程式需要建置時變數,先確認設定會把這些值提供給建置程序。KamuiDash Node.js 設定

確認公開頁面與 API

檢查公開網址下的 / 與 /healthz,確認 HTTP 狀態碼和回應內容。也請檢查應用程式實際使用的圖片、指令碼與 API。

KAMUIDASH · 畫面截圖
KamuiDash 靜態網站詳細資訊:執行狀態、公開網址、GitHub 分支與各次提交的部署紀錄。
此靜態網站範例顯示公開網址和部署所用的 Git commit。
症狀 檢查項目
建置失敗 Node.js 版本、鎖定檔、建置時變數
啟動後立即結束 .next 是否產生、啟動指令、工作目錄
健康檢查失敗 PORT、監聽位址、路徑與回應狀態
變數改了但畫面沒變 變數是否在建置時寫入
記憶體不足 問題出在建置時還是執行時

用小範例確認部署流程後,再以實際頁面、圖片處理與並行請求評估 CPU 和記憶體需求。增加執行個體之前,要考慮如何共用快取與重新驗證狀態、如何處理部署期間多版本共存,以及如何保存工作階段和持久檔案。

常見問題

Next.js 一定要用 Vercel 嗎?

Next.js 官方文件有 Node.js、Docker 和靜態匯出等部署方式。選擇前先確認目前使用的功能,以及哪些 Vercel 服務需要替換。

一定要設定 standalone 輸出嗎?

本例的 next build 與 next start 使用一般輸出即可。standalone 輸出會改變需要部署的檔案與啟動方式。

可以加上資料庫嗎?

可以。從伺服器端程式碼連線並規劃結構遷移。連線字串應留在伺服器端,避免出現在 NEXT_PUBLIC_ 變數或用戶端回應。

驗證範圍為本機建置及啟動範例。平台比較依據 2026 年 11 月 2 日查閱的官方文件。本文沒有在各平台測量效能,也未將此範例重新部署到 KamuiDash。

KamuiDash 是位於東京區域的 PaaS,可透過 GitHub 與 AI 整合公開 Web 應用程式。