部署在Azure静态Web Apps的Next.js根路径无法触发SSR问题咨询

核心原因 #

Azure Static Web Apps（SWA）的默认路由规则会优先将根路径/指向静态生成的index.html文件，跳过了Next.js的SSR处理逻辑；而子路径会被你的[...params].tsx捕获路由接管，正常触发SSR渲染，这就导致了根路径和子路径的行为差异。

具体解决方案 #

1. 调整SWA路由配置文件 #

在项目根目录创建或修改staticwebapp.config.json，添加根路径的转发规则，强制让根路径请求走Next.js的SSR处理：

{
  "routes": [
    {
      "route": "/",
      "serve": "/index",
      "statusCode": 200
    },
    {
      "route": "/_next/static/*",
      "serve": "/_next/static/*",
      "statusCode": 200
    },
    {
      "route": "/*",
      "serve": "/[...params]",
      "statusCode": 200
    }
  ],
  "navigationFallback": {
    "rewrite": "/[...params]"
  }
}

这个配置的作用是：

• 把根路径/的请求转发到Next.js的SSR入口/index，而不是直接返回静态index.html
• 保留Next.js静态资源的正常访问
• 让所有其他路径继续由捕获路由处理

2. 确认部署时的SSR配置 #

在Azure SWA的部署过程中，确保：

• 选择的框架是Next.js，并且启用了SSR选项（部署向导里有明确的“Enable server-side rendering”勾选框）
• 项目的package.json中build命令是next build，没有被修改为静态导出命令（比如next export会导致全静态生成，破坏SSR）

3. 检查根页面的导出逻辑 #

确认pages/index.tsx是默认导出的React组件，且没有使用getStaticProps（如果用了这个函数，Next.js会把根路径预渲染成静态文件，Azure会优先返回这个静态文件，跳过SSR）。如果需要SSR，根页面应该使用getServerSideProps或者不使用任何数据获取函数（纯客户端渲染+SSR兜底）。

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