你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn

在 Azure Static Web Apps 中部署 Next.js 网站

Azure Static Web Apps 上的 Next.js 支持可分为两种部署模型:

混合 Next.js 应用程序(预览版)

Static Web Apps 支持部署混合 Next.js 网站。 这可以支持所有 Next.js 功能,例如 App RouterReact 服务器组件

混合 Next.js 应用程序使用 Static Web Apps 全局分布式静态内容主机和托管后端功能进行托管。 Next.js 后端功能托管在专用的应用服务实例上,以确保功能完全兼容。

通过混合 Next.js 应用程序,页面和组件可以动态呈现、静态呈现或增量呈现。 Next.js 根据数据提取自动确定最佳呈现和缓存模型,以实现最佳性能。

预览版中可用的主要功能包括:

按照部署混合 Next.js 应用程序教程了解如何将混合 Next.js 应用程序部署到 Azure。

预览中不支持的功能

混合呈现的 Next.js 中不支持 Static Web Apps 的以下功能:

  • 选择 Azure 服务:使用 Azure Functions、Azure 应用服务、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 应用不会删除开发依赖项,也不会默认添加 sharp 包。 如果需要这些优化,请在传递 skip_app_build=true 之前将它们添加到自定义生成步骤。
  • 增量静态重新生成 (ISR):不支持映像缓存。

备注

混合 Next.js 应用程序的最大应用大小为 250 MB。 通过 Next.js 使用独立功能来优化应用大小。 如果这还不够,而你的应用大小要求超过 250 MB,请考虑使用静态 HTML 导出的 Next.js

服务器端呈现

以下步骤演示了如何将自定义后端关联到标准计划及更高版本的静态 Web 应用。

备注

链接后端仅适用于使用标准计划或更高版本的网站。

  1. 前往 Azure 门户中的静态 Web 应用。

  2. 从侧菜单中选择“设置”,然后选择“API”。

  3. 选择“配置链接后端”。

  4. 可创建新的应用服务计划,或选择现有的应用服务计划。

    所选应用服务计划必须至少使用一个 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 文件的静态 Web 应用程序任务中,将 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。