在下一个 13 中进行构建后，链接/路由不起作用

Question

我正在 next.js 13 中制作项目，目前只有 1 个文件夹名称 explore 具有动态路由。

在探索我在列表上映射并使用以及在链接中传递地图索引（这将是 id ），就像这样。

在我的开发中，它工作正常，但是当我在实时/生产中进行构建和测试时，它会出现错误

无法获取/爆炸

正在开发其 http://localhost:3000/explore/0/

然后在实时构建后无法获取 /explo 或 http://127.0.0.1:5500/explo

为什么在直播中会火爆？它应该是 explore/0 或 explore/1 （取决于传递的 id）

我在那里做了一个演示项目，我将一个简单的数组 id 传递到我的 [id] 页面。一切都运行良好，但在构建之后也存在同样的问题。我尝试使用客户端和服务器端都导致问题。我认为构建时有问题？

Answer 1

通过使用服务器站点生成方法 (SSG) 修复了问题，其中我们使用generateStaticParams()

当我们创建动态路由（[id]页面）时，我们需要在该[id]页面中使用generateStaticParams()。这将告诉 next.js 在构建运行时将其渲染为 (SSG) 而不是 SSR 或 CSR。

因此，(SSG) next 将动态数据存储为静态数据，当用户调用请求或点击 api next 时，next 已经渲染并存储了动态数据，并立即向用户提供请求的数据。这种方法通过不点击 api 进行请求来减少延迟，因为数据已经静态呈现并存储。

在我的问题图片中，我正在映射列表并将索引发送到 explore[id] 。在这里你可以看到我使用了 SSG 方法。我分享的视频将让您清楚如何使用（SSG）获取动态数据。 https://youtu.be/UgseormfMc4

请阅读有关 (SSG) 的更多信息 https://nextjs.org/docs/pages/building-your-application/rendering/static-site- Generation

这里我使用了地图并提到了 id（在本例中为 18），我不会更改数据。如果您使用的 api 或您的动态数据可能会发生变化。请考虑观看我分享的视频或阅读 SSG 文档。