如何在静态 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 页面会定期添加、删除和更新，因此我不想在构建时使用getStaticPropsand生成它们getStaticPaths。

我考虑过的解决方案

• 我尝试将 S3 错误文档路由到out/index.html，希望它能加载主页、运行 JavaScript、识别路径并最终显示正确的[id]页面，但它只是停留在主页上。
• 我已经考虑尝试使用 Lambda@Edge 的解决方案来加载正确的页面，但是无论何时我在应用程序中添加或更改路径，我都可能需要更新看起来很混乱的 lambda。

我错过了什么吗？

Answer 1

在进行了更多阅读后，我意识到无服务器 next.js基本上旨在解决同样的问题。它将您的 Next.js 应用程序托管在 s3 存储桶中，然后结合使用 CloudFront 行为和 Lambda@Edge 将您的请求路由到正确的位置。

它还包括对许多其他 Next.js 功能的支持，所以看起来这就是目前的方法。

Answer 2

经过一年多的自我坚持，纯粹使用 S3 和 Cloudfront 托管它，我已经转移到 Vercel。如果您的网站有大量页面（如产品列表），那么为了 SEO 和性能，您必须拥有 ISG（增量静态生成），而您无法通过纯 S3 和 Cloudfront 组合来做到这一点。我们奋力拼搏，看起来我们的工程部门打算打造像 vercel 这样的产品，而不是自己开发产品。所以最后拔掉插头并搬家。

注意：我不为 vercel 工作，这只是基于 S3 + Cloudfront + LambdaEdge 的挣扎 1.5 年之后的启示，此后生活很容易。