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

  • 發行項

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

混合式Next.js應用程式 （預覽）

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

混合式Next.js應用程式是使用靜態 Web Apps 全域散發的靜態內容主機和受控後端函式來裝載。 Next.js後端函式裝載在專用的 App Service 實例上，以確保完整的功能相容性。

透過混合式Next.js應用程式，頁面和元件可以動態轉譯、靜態轉譯或累加轉譯。 Next.js會自動根據數據擷取來判斷最佳轉譯和快取模型，以獲得最佳效能。

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

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

預覽中不支援的功能

使用混合式轉譯Next.js不支持靜態 Web Apps 的下列功能：

  • 使用 Azure Functions、Azure App 服務、Azure Container Apps 或 Azure API 管理 的連結 API。
  • SWA CLI 本機模擬和部署。
  • 檔案的部分 staticwebapp.config.json 支援。
    • 不支持導覽後援。
    • 必須在內設定路由重寫至Next.js應用程式內的 next.config.js路由。
    • 檔案內的 staticwebapp.config.json 組態優先於內的 next.config.js組態。
    • 應使用 來處理 next.config.js Next.js月台的設定，以取得完整的功能相容性。
  • skip_app_build 和 skip_api_build 無法在部署映像內 Azure/static-web-apps-deploy@v1 使用。
  • 累加式靜態重新產生 （ISR） 不支援快取映像。

注意

混合式Next.js應用程式的應用程式大小上限為 250 MB。 針對 優化的應用程式大小使用獨立 功能，Next.js。 如果這還不夠，請考慮使用 導出的靜態 HTML Next.js 如果您的應用程式大小需求超過 250 MB。

靜態 HTML 匯出

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

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

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

/** @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 。 根據預設，此值會根據預設值設定為 out Next.js。 如果在Next.js組態中指出自定義輸出位置，則為組建提供的值應該符合Next.js導出中所設定的值。

如果您使用自訂建置文稿，請在 GitHub Actions/Azure DevOps YAML 檔案的靜態 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。