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 功能的支持，所以现在看来这是要走的路。

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

1 个答案: