部署

恭喜！您來到這裡表示已準備好部署 Next.js 應用程式。本頁將展示如何使用 Next.js 建置 API 來部署託管或自託管方案。

Next.js 建置 API

next build 會為生產環境生成優化版的應用程式。此標準輸出包含：

• 使用 getStaticProps 或 自動靜態優化 的頁面 HTML 檔案
• 全域或個別作用域樣式的 CSS 檔案
• 用於從 Next.js 伺服器預渲染動態內容的 JavaScript
• 透過 React 在客戶端實現互動性的 JavaScript

這些輸出會生成在 .next 資料夾內：

• .next/static/chunks/pages – 此資料夾中的每個 JavaScript 檔案對應相同名稱的路由。例如，.next/static/chunks/pages/about.js 會在應用程式中查看 /about 路由時載入
• .next/static/media – 從 next/image 靜態匯入的圖片會經過雜湊處理並複製到此處
• .next/static/css – 應用程式中所有頁面的全域 CSS 檔案
• .next/server/pages – 從伺服器預渲染的 HTML 和 JavaScript 進入點。當啟用 輸出檔案追蹤 時會建立 .nft.json 檔案，其中包含依賴特定頁面的所有檔案路徑
• .next/server/chunks – 在應用程式中多處共用的 JavaScript chunks
• .next/cache – 建置快取和 Next.js 伺服器快取圖片、回應及頁面的輸出。使用快取有助於減少建置時間並提升載入圖片效能

.next 內的所有 JavaScript 程式碼都已編譯，瀏覽器套件也已最小化，以實現最佳效能並支援 所有現代瀏覽器。

使用 Vercel 託管 Next.js

Vercel 是零配置部署 Next.js 應用程式的最快方式。

部署到 Vercel 時，平台會 自動偵測 Next.js，執行 next build，並為您優化建置輸出，包括：

• 跨部署保留未變更的快取資源
• 每次提交都有唯一 URL 的 不可變部署
• 可能情況下，頁面 會自動靜態優化
• 資源 (JavaScript、CSS、圖片、字型) 會從 全球邊緣網路 壓縮並提供
• API 路由 會自動優化為可無限擴展的 無伺服器函式
• 中介軟體 會自動優化為零冷啟動並立即啟動的 邊緣函式

此外，Vercel 還提供以下功能：

• 透過 Next.js 速度洞察 自動監控效能
• 自動 HTTPS 和 SSL 憑證
• 自動 CI/CD (透過 GitHub、GitLab、Bitbucket 等)
• 支援 環境變數
• 支援 自訂網域
• 支援使用 next/image 進行 圖片優化
• 透過 git push 實現即時全球部署

免費將 Next.js 應用程式部署到 Vercel 試用看看。

自託管

您可以使用 Node.js 或 Docker 自託管 Next.js 並支援所有功能。您也可以進行 有部分限制 的靜態 HTML 匯出。

Node.js 伺服器

Next.js 可以部署到任何支援 Node.js 的託管供應商。例如 AWS EC2 或 DigitalOcean Droplet。

首先，確保您的 package.json 有 "build" 和 "start" 腳本：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

然後，執行 npm run build 來建置應用程式。最後，執行 npm run start 啟動 Node.js 伺服器。此伺服器支援 Next.js 的所有功能。

如果使用 next/image，考慮在生產環境中執行 npm install sharp 來新增 sharp 以獲得更好的 圖片優化 效能。在 Linux 平台上，sharp 可能需要 額外配置 以避免過多記憶體使用。

Docker 映像

Next.js 可以部署到任何支援 Docker 容器的託管供應商。當部署到容器協調器如 Kubernetes 或 HashiCorp Nomad，或在任何雲端供應商的單一節點中執行時，可以使用此方法。

1. 在您的機器上 安裝 Docker
2. 克隆 with-docker 範例
3. 建置容器：docker build -t nextjs-docker .
4. 執行容器：docker run -p 3000:3000 nextjs-docker

如果需要在多個環境中使用不同的環境變數，請查看我們的 with-docker-multi-env 範例。

靜態 HTML 匯出

如果想對 Next.js 應用程式進行靜態 HTML 匯出，請按照我們的 靜態 HTML 匯出文件 中的指示操作。

其他服務

以下服務支援 Next.js v12+。下方您會找到部署 Next.js 到各服務的範例或指南。

託管伺服器

• AWS Copilot
• Digital Ocean App Platform
• Google Cloud Run
• Heroku
• Railway
• Render

須知：也有託管平台允許您使用 Dockerfile，如 上方範例 所示。

僅靜態

以下服務僅支援使用 output: 'export' 部署 Next.js。

• GitHub Pages

您也可以手動將 output: 'export' 的輸出部署到任何靜態託管供應商，通常是透過 CI/CD 管道如 GitHub Actions、Jenkins、AWS CodeBuild、Circle CI、Azure Pipelines 等。

無伺服器

• AWS Amplify
• Azure Static Web Apps
• Cloudflare Pages
• Firebase
• Netlify
• Terraform
• SST

須知：並非所有無伺服器供應商都實作了 next start 的 Next.js 建置 API。請與供應商確認支援哪些功能。

自動更新

部署 Next.js 應用程式時，您會希望看到最新版本而無需重新載入。

Next.js 會在路由時於背景自動載入應用程式的最新版本。對於客戶端導航，next/link 會暫時作為普通的 <a> 標籤運作。

須知：如果新頁面 (舊版本) 已被 next/link 預取，Next.js 會使用舊版本。導航到尚未預取 (且未在 CDN 層級快取) 的頁面會載入最新版本。

手動優雅關機

自託管時，您可能想在伺服器因 SIGTERM 或 SIGINT 訊號關閉時執行程式碼。

您可以將環境變數 NEXT_MANUAL_SIG_HANDLE 設為 true，然後在 _document.js 檔案中為該訊號註冊處理常式。您需要直接在 package.json 腳本中註冊環境變數，而非在 .env 檔案中。

須知：手動訊號處理在 next dev 中不可用。

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // 這應該新增在您的自訂 _document 中
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: ', 'cleaning up')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('Received SIGINT: ', 'cleaning up')
    process.exit(0)
  })
}