如何手动部署带动态路由的NextJS SPA至Azure静态Web应用

一、静态导出模式下动态路由404的解决方案 #

你的核心问题是静态导出后动态路由无对应HTML文件，导致Azure SWA返回404。由于你的应用是纯客户端路由（仅客户端获取数据，无SSR/SSG），所有动态路径都需要由Next.js的客户端路由引擎接管处理，而非Azure直接返回静态文件。

正确的staticwebapp.config.json配置需设置全局Fallback路由，让所有匹配不到静态文件的请求都重写到根目录的index.html（Next.js静态导出后的入口文件）：

{
  "routes": [
    {
      "route": "/*",
      "rewrite": "/index.html"
    }
  ],
  "mimeTypes": {
    ".json": "text/json"
  }
}

为何之前的配置无效？ #

• Azure SWA的路由参数语法使用:param而非[id]，但更关键的是：静态导出后根本不存在/requests/[id]/index.html这类文件，重写路径指向了不存在的资源，自然仍返回404。
• 纯客户端路由的SPA，所有动态路径（包括嵌套的/requests/[id]/xxx）都需要回到根index.html，由Next.js客户端路由解析路径并渲染对应组件。

同时请保留next.config.js中的静态导出必要配置：

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  distDir: 'build',
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

二、移除output: 'export'后的部署问题 #

当你移除output: 'export'后，Next.js的build目录是为Node.js服务器准备的产物，并非纯静态文件集合，因此Azure SWA找不到index.html是正常现象——此时的产物需要Node.js运行环境，而Azure静态Web Apps默认仅托管静态文件，需启用Next.js集成模式才能运行。

若坚持不用静态导出，正确部署方式如下：

1. 在next.config.js中替换为output: 'standalone'，生成独立可执行的Next.js产物：

module.exports = {
  // ...其他原有配置
  output: 'standalone',
  distDir: 'build',
};

2. 使用SWA CLI部署时，需指定API目录（Standalone模式依赖Node.js服务器作为API层）：

swa deploy --deployment-token <你的部署令牌> ./build --api-location ./build/server --env production

注意：这种模式下Azure SWA会运行Next.js的Node.js服务器，虽然能处理动态路由，但对于纯客户端获取数据的SPA来说，静态导出+Fallback路由的方案更轻量、成本更低，推荐优先采用第一种方案。

验证步骤 #

1. 重新执行npm run build生成静态导出产物
2. 将staticwebapp.config.json放在项目根目录（构建后会自动复制到build目录）
3. 执行部署命令：swa deploy --deployment-token <你的令牌> ./build --env production
4. 访问动态路由（如/requests/7ecf58774844），此时Azure会将请求重写到index.html，由Next.js客户端路由接管并渲染对应组件

内容的提问来源于stack exchange，提问作者Gaurav Mantri