說明文件

API 參考文件

部署

恭喜您，您已準備好將您的 Next.js 應用程式部署到生產環境。本文件將展示如何利用 Next.js 建置 API 以託管或自行託管的方式部屬。

Next.js 建置 API

next build 將為您的生產環境應用程式生成最佳化版本。此標準輸出包括：

使用 getStaticProps 或自動靜態最佳化的頁面的 HTML 文件
用於全域或個別作用域樣式的 CSS 檔案
用於從 Next.js 伺服器預先渲染動態內容的 JavaScript
透過 React 在客戶端進行互動用的 JavaScript

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

.next/static/chunks/pages－此資料夾中的每個 JavaScript 檔案都與同名稱的路由相關。例如，當您的網頁應用程式中有人查看 /about 路由時，將會加載 .next/static/chunks/pages/about.js－這個 JavaScript 文件
.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 程式碼都已被編譯，瀏覽器 bundles 也已縮小，使其能擁有最佳效能並支援所有現代的瀏覽器。

使用 Vercel 託管 Next.js

Vercel 是部署 Next.js 應用程式最快的方式，並且不需要任何配置。

當部署到 Vercel 時，平台會自動檢測 Next.js，執行 next build，並為您產出最佳化的版本，包括：

如果沒有更改任何檔案，則跨部署保留快取資產
不可變的部署－每次 commit 都會有一個唯一的 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"
  }
}

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

如果您正在使用 next/image，請考慮在專案資料夾的生產環境中執行 npm install sharp 以獲得更高效的影像最佳化。在 Linux 系統上，sharp 可能需要額外配置以防止過度使用記憶體。

Docker 映像檔

Next.js 可以部署到任何支援 Docker 容器的託管服務平台。在部署到像是 Kubernetes 或 HashiCorp Nomad 等容器編排工具時，或者在任何雲端供應商的單個節點內運行時，您可以使用以下方法。

在您的裝置上安裝 Docker
Clone with-docker 範例
建置您的容器：docker build -t nextjs-docker .
執行您的容器：docker run -p 3000:3000 nextjs-docker

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

靜態 HTML 輸出

如果您想對 Next.js 應用程式進行靜態 HTML 輸出，請按照我們的靜態 HTML 導出文件中的說明進行操作。

其他服務

以下服務支援 Next.js v12+。您可以在下方找到將 Next.js 部署到各個服務平台的範例或指南。

託管伺服器

注意：還有一些託管平台允許您使用 Dockerfile，如上面的例子。

僅有靜態

以下服務支援使用 next export 部署 Next.js。

您還可以手動將 next export 的輸出部署到任何靜態託管服務供應商，通常是透過您的 CI/CD pipeline，例如 GitHub Actions、Jenkins、AWS CodeBuild 、Circle CI、Azure Pipelines 等。

無伺服器運算

注意：並非所有無伺服器運算服務供應商都從 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 檔案中為該信號註冊一個處理函式。

// pages/_document.js

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)
  })
}