next.config.js配置rewrites本地正常 部署S3静态托管仅部分生效

问题场景 #

项目配置的rewrites规则在本地运行环境和S3静态托管环境下表现完全不一致：

• 本地执行next build构建、next start启动项目时，所有重写规则均可正常工作
• 上传构建生成的out纯静态文件夹到S3存储桶、开启静态网站托管后，仅/dashboard/:any*对应的重写规则能正常生效，/env/:any*、/app/:any*对应的规则完全失效

项目使用的next.config.js配置如下：

module.exports = withImages({
  async rewrites() {
    return [
      {
        source: '/dashboard/:any*',
        destination: '/admin/app',
      },
      {
        source: '/env/:any*',
        destination: '/admin/app',
      },
      {
        source: '/app/:any*',
        destination: '/admin/app',
      }
    ]
  }
});

核心原因 #

Next.js的rewrites功能完全依赖框架内置的Node.js服务运行时，仅在SSR、混合渲染、next start启动的服务端场景下生效。
当项目通过静态导出模式生成纯静态out文件夹时，框架不会把任何rewrites规则逻辑打包到静态产物中——这些规则从设计上就是供Node服务层识别请求、做路由转发用的，静态文件环境下没有对应的运行时来解析和执行这些规则。
本地环境所有规则运行正常，本质是next start启动的Node服务在运行时读取了配置里的rewrites规则，完成了请求转发。
S3环境下/dashboard/:any*能正常生效，并非Next.js的rewrites在起作用：这是因为你配置S3静态托管时，之前设置的自定义404响应规则、或者路径映射规则，刚好覆盖了/dashboard/路径前缀，将匹配的请求指向了/admin/app对应的静态资源；而/env/、/app/两个路径前缀没有被纳入S3托管层的映射规则，访问这些路径时S3因找不到对应静态文件直接返回404，最终表现为对应规则失效。

可行解决方向 #

• 纯静态导出场景下，不要依赖Next.js的rewrites功能实现路由映射，所有重写逻辑需要由托管层（S3、前置的CloudFront等）独立配置
• 要实现三个路径的统一跳转，可在S3静态托管配置中，将匹配三个路径前缀的404请求，统一重写到构建产物中admin/app对应的静态HTML文件
• 若希望框架的rewrites规则开箱即用，需放弃纯静态导出模式，改用支持Next.js服务端运行时的部署方式

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