NextJS(v.12) pages/404.js仅开发模式生效，Amplify部署后失效求助

• 检查Amplify重写与重定向规则
  Amplify默认配置会将所有非文件请求重定向到首页，这会覆盖NextJS的404页面逻辑。进入Amplify控制台的重写与重定向页面，调整规则：

  • 删除或修改默认的</^[^.]+$/> → /index.html (200)规则，改为仅对存在的路由进行重写，或者设置当请求路径不存在时，让NextJS处理404返回。如果是静态导出的NextJS项目，确保规则允许访问/404.html。

• 确认NextJS部署模式配置

  • 若使用next export静态导出，需在next.config.js中配置trailingSlash: true，确保构建时生成独立的404.html文件，且Amplify部署时正确上传该文件。
  • 若为SSR模式，需确认Amplify的NextJS构建配置正确启用了服务器端渲染，未强制将所有请求导向首页。

• 检查pages/404.js组件代码
  确保组件无自定义跳转逻辑（比如useEffect内的路由跳转），保持最基础的404页面结构：

  export default function Custom404() {
    return (
      <div className="container">
        <h1>404 - 页面不存在</h1>
      </div>
    );
  }
  

• 查看Amplify构建日志
  进入Amplify控制台的部署历史，查看构建环节的日志，确认NextJS构建过程中成功生成了404页面相关资源，无报错信息。

• 验证Amplify缓存策略
  若之前的错误配置被缓存，可在Amplify控制台的缓存管理中清空缓存，或调整缓存规则，确保404页面的响应不被错误缓存。

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