相关疑难解决方法(0)

Next.js:托管在 AWS Cloudfront 上时,如何使链接与导出的站点一起使用?

我正在尝试通过执行静态 html 导出(即next export),然后将生成的输出复制到 AWS S3 并通过 Cloudfront 提供服务来获得原型 Next.js 项目。

我在/pages目录中有以下两页:

  • index.tsx
  • Pricing.tsx

然后,从路由 doco 开始,Link从索引页面向定价页面添加了一个,如下所示:

<Link href="/Pricing">
  <a>Pricing</a>
</Link>
Run Code Online (Sandbox Code Playgroud)

这会产生一个看起来像这样的链接example.com/Pricing(当您将鼠标悬停在它上面并单击该链接时,该页面确实会更改为定价页面,并且浏览器在 URL 栏中显示“example.com/Pricing”)。

问题是,该链接不是真实的 - 无法直接通过 url 栏添加书签或导航到它。

问题似乎是,当我执行 a 时next export,Next.js.html为每个页面生成一个文件,但路由器不使用这些.html后缀。

因此,在使用该站点时,如果用户尝试添加书签example.com/Pricing;稍后加载该书签将失败,因为 Cloudfront 将返回 404(因为 CF 只知道该.html文件)。

然后我尝试改变我Link的样子:

<Link href="/Pricing.html">
  <a>Pricing</a>
</Link>
Run Code Online (Sandbox Code Playgroud)

这会导致路由器使用example.com/Pricing.html并且与 Cloudfront 一起工作正常 - 但它实际上在本地开发期间导致 404(即使用next dev)!

我可以尝试的其他解决方法是 …

amazon-s3 amazon-web-services amazon-cloudfront next.js

2
推荐指数
1
解决办法
1906
查看次数