如何将NextJS项目作为纯客户端React单页应用部署到S3？

完全可以把Next.js项目当作纯客户端单页应用（SPA）部署到S3静态站点，关键是调整Next.js配置、修复路由逻辑，再配合CloudFront和S3的正确设置，就能解决直接访问子路由重定向的问题。具体步骤如下：

1. 调整Next.js配置以支持纯静态导出 #

• 在next.config.js中添加静态导出配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    output: 'export', // Next.js 13+ 版本使用该配置，旧版本可使用 exportPathMap
    trailingSlash: true, // 可选，但推荐开启，确保每个路由生成对应文件夹下的index.html
    reactStrictMode: true,
  }
  
  module.exports = nextConfig
  

• 移除/替换SSR相关代码：如果模板里使用了getServerSideProps、getInitialProps这类服务器端数据获取逻辑，需要迁移到客户端实现，比如用useEffect、SWR或React Query在客户端请求数据——静态导出不支持服务器端渲染特性。

2. 排查并修复路由重定向逻辑 #

• 检查全局路由跳转代码：很多管理模板会内置默认路由守卫（比如未登录时跳转首页），即使是非保护路由也可能被误触发。找到useEffect中的路由跳转、自定义路由守卫组件或NextAuth相关配置，确保/account、/users等路由不会被强制重定向到/home。
• 本地验证静态导出结果：执行npm run build && npm run export后，用npx serve out启动静态服务器，直接访问http://localhost:3000/account，确认本地能正常加载页面且URL不跳转，先排除代码本身的问题。

3. 配置S3和CloudFront以支持客户端路由 #

• S3静态网站托管设置：
  开启静态网站托管，将索引文档和错误文档都设为index.html——让S3把所有404请求转发到index.html，交由客户端路由处理。
• CloudFront配置：
  • 在行为设置中，将默认根对象设为index.html。
  • 添加错误页面规则：把403、404状态码重定向到/index.html，并将响应状态码设为200，确保所有直接访问子路由的请求都能转发到index.html。
  • 调整缓存策略：避免缓存错误页面的重定向规则，确保新配置及时生效。

4. 重新部署验证 #

• 重新执行npm run build && npm run export，将out文件夹内的所有文件上传到S3。
• 清除CloudFront缓存，直接访问/account等子路由，确认URL保留且页面正常加载。

内容的提问来源于stack exchange，提问作者Herbert Cabus Jacby