在 Azure Static Web Apps 上部署 Next.js 網站

Azure Static Web Apps 上的 Next.js 支援可分為兩種部署模型：

• 混合式：混合式 Next.js 網站，包括支援所有 Next.js 功能 (例如應用程式路由器、頁面路由器和 React Server 元件)

• 靜態：靜態 Next.js 網站，其使用 Next.js 的靜態 HTML 匯出選項。

混合式 Next.js 應用程式 (預覽)

靜態 Web Apps 支援部署混合式 Next.js 網站。 這可支援所有 Next.js 功能 (例如應用程式路由器和 React Server 元件)。

混合式 Next.js 應用程式使用 Azure Static Web Apps 在全球分佈的靜態內容主機和受控後端函式進行託管。 Next.js 後端函式託管在專用的 App Service 執行個體上，以確保完整的功能相容性。

透過混合式 Next.js 應用程式，頁面和元件可以動態轉譯、靜態轉譯或增量轉譯。 Next.js 會根據您的資料擷取自動確定最佳的轉譯和快取模型，以獲得最佳的效能。

預覽中可用的主要功能包括：

• 應用程式路由器和頁面路由器
• React Server 元件
• 混合式轉譯
• 路由處理常式
• 影像最佳化
• 國際化
• 中介軟體
• 驗證

請遵循部署混合式 Next.js 應用程式教學課程，了解如何將混合式 Next.js 應用程式部署至 Azure。

預覽中不支援的功能

具有混合式轉譯的 Next.js 不支援 Static Web Apps 的下列功能：

• 選取 Azure 服務：使用 Azure Functions、Azure App Service、Azure 容器應用程式或 Azure API 管理連結的 API。
• SWA CLI 功能：SWA CLI 本機模擬和部署。
• 部分功能支援：不支援 staticwebapp.config.json 檔案中的下列屬性：
  • 不支援導覽後援。
  • 必須在 next.config.js 內設定對 Next.js 應用程式內路由的路由重寫。
  • staticwebapp.config.json 檔案內的設定會優先於 next.config.js 內的設定。
  • 應使用 next.config.js 處理 Next.js 網站的設定，以取得完整的功能相容性。
• 建置略過：如果 skip_api_build=true為 Next.js 應用程式，靜態 Web Apps 不會移除開發相依性，或預設新增尖銳套件。 如果您想要這些優化，請在傳遞 skip_app_build=true之前，將它們新增至您的自定義建置步驟。
• 增量靜態重新產生 (ISR)：不支援影像快取。

注意

混合式 Next.js 應用程式的最大應用程式大小為 250 MB。 使用 Next.js 的獨立功能來取得最佳化的應用程式大小。 如果這還不夠，請考慮使用匯出的靜態 HTML Next.js (如果您的應用程式大小需求超過 250 MB)。

伺服器端轉譯

以下步驟向您展示如何將自訂後端關聯到您的標準方案和更高方案的靜態 Web 應用程式。

注意

連結後端僅供使用標準方案或以上版本的網站使用。

1. 移至 Azure 入口網站中的靜態 Web 應用程式。

2. 選取 [設定]，然後從側邊功能表選取 [API]。

3. 選取 [設定連結的後端]。

4. 建立新的 App Service 方案，或選取現有的 App Service 方案。

   您選取的 App Service 方案至少必須使用 S1 SKU。

5. 按一下 [連結]。

靜態 HTML 匯出

您可以使用 Next.js 的靜態 HTML 匯出功能來部署 Next.js 靜態網站。 此組態會在建置期間產生靜態 HTML 檔案，這些檔案會針對所有要求進行快取和重複使用。 請參閱 Next.js 靜態匯出的支援功能。

靜態 Next.js 網站託管在 Azure Static Web Apps 全球分散式網路上，以獲得最佳效能。 此外，您也可以為您的 API 新增連結的後端。

若要啟用 Next.js 應用程式的靜態匯出，請將 output: 'export' 新增至 next.config.js 中的 nextConfig。

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

您也必須在 GitHub Actions/Azure DevOps 組態中指定 output_location。 根據預設，此值會根據 Next.js 預設值設定為 out。 如果在 Next.js 組態中指出了自訂輸出位置，則為建置所提供的值應符合 Next.js 匯出中所設定的值。

如果您使用自訂建置指令碼，請在 GitHub Actions/Azure DevOps YAML 檔案的Static Web Apps工作中，將 IS_STATIC_EXPORT 設定為 true。

下列範例呈現針對靜態匯出啟用的 GitHub Actions 作業。

      - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "out" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

遵循部署靜態轉譯 Next.js 網站的教學課程，了解如何將靜態匯出 Next.js 應用程式部署至 Azure。