如何将Next JS构建的index.html与其他静态资源分开部署？

仅手动修改index.html内的相对路径为指向S3的绝对路径可行，但不是最优解，存在以下潜在问题：

• 遗漏动态加载资源的路径：Next.js运行时会通过JS代码动态加载组件或资源，这些路径不在index.html里，手动修改会导致这类资源加载失败
• 维护成本高：每次build后都要重复修改路径，容易出错

推荐的官方解决方案 #

直接在next.config.js中配置资源前缀，让build过程自动生成带绝对路径的资源引用，无需手动修改：

module.exports = {
  // 指定静态资源的远程存储前缀
  assetPrefix: 'https://s3.amazonaws.com/my-public-bucket/',
  // 明确导出纯静态站点（无服务端逻辑）
  output: 'export',
}

部署步骤 #

1. 执行next build && next export，生成的out文件夹中所有资源引用都会自动带上配置的绝对前缀
2. 将out文件夹中的_next目录及所有静态资源（如public下的文件）完整上传到S3桶的根目录
3. 将out文件夹中的index.html部署到你的商业产品环境中

注意事项 #

• 确保S3桶配置为公开可读，否则外部无法访问静态资源
• 上传S3的资源目录结构必须和out文件夹内的结构完全一致，不能修改层级
• 部署后检查控制台是否有404错误，确认所有资源加载正常

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