Next.js部署AWS CloudFront路由刷新跳转异常问题求助

问题根源 #

静态导出的Next.js项目，每个路由会生成对应的.html文件（比如/about对应/about.html）。但CloudFront默认处理不带后缀的URL时，会尝试查找对应目录下的index.html，找不到就会跳转到根目录的首页，这就是刷新或直接访问URL时跳转异常的核心原因。

具体解决步骤 #

1. 配置CloudFront错误页面重定向 #

在CloudFront控制台操作：

• 找到你的分发，进入行为标签页，编辑默认行为
• 滚动到错误页面区域，添加两个自定义错误响应：
  • HTTP错误代码：404，自定义响应代码：200，响应页面路径：/index.html
  • HTTP错误代码：403，自定义响应代码：200，响应页面路径：/index.html
• 保存更改，等待CloudFront分发更新生效

2. 调整S3存储桶静态托管设置（若以S3为源） #

如果你的CloudFront源是S3存储桶：

• 进入S3控制台，找到对应存储桶，开启静态网站托管
• 设置索引文档为index.html，错误文档同样设为index.html
• 确保存储桶权限允许CloudFront正常访问

3. 优化Next.js导出配置（可选） #

在next.config.js中添加trailingSlash: true配置：

module.exports = {
  trailingSlash: true,
  // 保留你原有的其他配置
}

开启后，Next.js导出时会为每个路由生成带斜杠的目录（比如/about/），目录内包含index.html，CloudFront能直接匹配到对应内容，从根源避免后缀匹配问题。

验证方式 #

更新部署后：

• 刷新任意路由页面，确认不会跳转到首页
• 直接在地址栏输入不带.html的URL（比如https://你的域名/about），确认能正常加载对应页面

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