托管在 Cloudfront 上的 Next.js 静态网站在其他端点的页面刷新时重定向到主页

Question

Next.js 静态网站托管在 S3 和 Cloudfront 上，面临的问题是从主页以外的端点进行路由和刷新。目录结构：

pages/
    index.tsx
    search/
         advSearch.tsx
         results.tsx 

当前，Next.js 配置设置为 trailingSlash: true 当执行 next build && next export 时，导出的静态文件如下所示。

out/
    index.html
    search/
         advSearch/
              index.html
         results/
              index.html

因此，在访问 URL

MySearchApp.cloudfront.net

时，会呈现主页的正确 index.html。通过主页上的链接导航到 advSearch 和结果页面后，路由正常工作。但是，当网站从 advSearch 或结果页面（或直接访问 URL

MySearchApp.cloudfront.net/results

或

MySearchApp.cloudfront.net/advSearch

）刷新时，主页 index.html 会呈现。 通过手动将 index.html（即

advSearch/index.html

）添加到 URL 来访问文件按预期工作，但只是尝试访问

advSearch/

不起作用。

预期行为访问

MySearchApp.cloudfront.net/advSearch

后，它不应呈现主页，但应指向 advSearch/index.html 并为端点呈现正确的页面。 Next.js 版本：12.3

阅读过去发布的类似问题后，在 Next.js 配置中检查并设置了 trailingSlash: true 但这没有任何区别。