Next.js部署AWS S3后直接访问子路径显示首页问题排查修复

调试步骤 #

• 检查S3桶文件结构：登录S3控制台，确认是否存在blog.html文件，而非blog/index.html。Next.js默认静态导出会生成blog.html，而S3访问/blog时会默认寻找blog/index.html，找不到就返回首页。
• 直接访问/blog.html：如果能正常显示博客页面，说明问题出在S3的路由映射逻辑，而非Next.js页面生成问题。
• 检查S3静态网站托管设置：查看错误文档是否设为index.html，S3会把所有未找到的路径跳转到错误文档，这是导致子路径显示首页的常见原因。

解决方法 #

方法一：修改Next.js导出配置（推荐） #

在next.config.js中启用trailingSlash选项，让Next.js导出时为子路径生成对应目录的index.html：

module.exports = {
  trailingSlash: true,
}

重新执行构建导出命令：

next build && next export

将生成的out目录下所有文件重新上传到S3，此时访问/blog会自动加载blog/index.html，正常显示页面。

方法二：配置S3重定向规则 #

若不想修改Next.js配置，可在S3静态网站托管设置中添加重定向规则，将无后缀的子路径重定向到对应.html文件：

1. 进入S3桶的「静态网站托管」设置页
2. 在「重定向规则」中添加以下XML规则：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <ReplaceKeySuffixWith>.html</ReplaceKeySuffixWith>
      <HttpRedirectCode>302</HttpRedirectCode>
    </Redirect>
  </RoutingRule>
</RoutingRules>

该规则会将所有404请求（如/blog）自动追加.html后缀（转为/blog.html），若文件存在则正常显示，否则返回首页。

额外注意事项 #

如果使用Next.js动态路由（如/blog/[id]），需确保已通过getStaticProps和getStaticPaths完成预渲染，生成对应的静态HTML文件，否则S3上无对应文件，仍会跳转到首页。

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