Azure静态Web Apps中Next.js自定义404页面不生效问题求助

针对你的问题，整理了几个常见原因和对应的解决方法：

1. 静态导出的404页面路径不匹配 #

Next.js静态导出后，自定义404页面会生成在out/404/index.html，而你配置的重写路径是/404.html，Azure找不到对应文件，因此 fallback 到自带的404页面。

修正配置：将staticwebapp.config.json中的rewrite路径改为/404/index.html，修改后的配置如下：

"responseOverrides": {
    "404": {
      "rewrite": "/404/index.html",
      "statusCode": 404
    }
  }

2. staticwebapp.config.json的位置或部署排除问题 #

确保staticwebapp.config.json放在项目根目录，并且没有被.gitignore或者部署配置规则排除，必须保证这个文件被同步到Azure静态Web Apps的根目录下。

3. 构建命令或输出目录配置错误 #

检查Azure静态Web Apps的构建配置：

• 确认构建命令为next build && next export，如果只执行next build不会生成静态导出的out目录
• 确认输出目录设置为out，否则Azure无法正确识别静态文件位置

4. Azure缓存导致的旧页面残留 #

Azure静态Web Apps可能缓存了旧的错误页面，尝试以下操作：

• 重新触发一次完整部署，确保新的配置和页面文件被上传
• 在Azure门户的静态Web Apps资源中，进入配置 > 缓存策略，检查是否有针对404页面的缓存规则，必要时临时禁用缓存测试

额外检查：Next.js 404页面的导出正确性 #

确保你的pages/404.ts是正确导出的React组件，示例代码如下：

export default function Custom404() {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>你访问的页面不存在，请检查路径是否正确。</p>
    </div>
  );
}

执行next build && next export后，确认out/404/index.html文件存在且内容符合预期。

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