reactjs - 如何在静态 S3/CloudFront 网站托管上呈现动态 Next.js 路径？

Question

摘要
我正在尝试使用 S3 和 CloudFront 上的静态网站托管来设置 Next.js。在大多数情况下它有效，但我在动态路由方面遇到了麻烦。
我的目录结构是这样的。

pages/
  index.js
  about.js
  [id].js

目前我的 Next.js 配置设置为 trailingSlash: true，所以当我运行 next build && next export 时，我导出的静态文件看起来像这样。

out/
  index.html
  about/
    index.html
  [id]/
    index.html

这意味着当我访问“123456.cloudfront.net”或“123456.cloudfront.net/about/”时，会显示正确的 index.html。但是，当我访问“123456.cloudfront.net/1/”时，我显然收到了一条错误消息，而不是 out/[id]/index.html 。
注意事项
id 页面会定期添加、删除和更新，因此我不想在构建时使用 getStaticProps 和 getStaticPaths 生成它们。
我考虑过的解决方案

我尝试将 S3 错误文档路由到 out/index.html，希望它能加载主页、运行 JavaScript、识别路径并最终显示正确的 [id] 页面，但它只是停留在主页上。

我已经考虑尝试使用 Lambda@Edge 的解决方案来加载正确的页面，但是无论何时我在应用程序中添加或更改路径，我都可能需要更新 lambda，这看起来很困惑。

我错过了什么吗？

Answer 1

在对此进行了更多阅读后，我意识到 serverless next.js基本上是为了解决同样的问题。它在 s3 存储桶中托管您的 Next.js 应用程序，然后使用 CloudFront 行为和 Lambda@Edge 的组合将您的请求路由到正确的位置。
它还包括对许多其他 Next.js 功能的支持，所以现在看来​​这是要走的路。