具有动态路由的下一个 js ([[…slug.js]]) 来处理所有 URL 显示 404 以显示指向主页的链接 - 但仅在部署时

Question

我想要一个动态路由来处理此应用程序中的所有请求，因此我编写了一个名为[[...slug]].js的文件来执行此操作。 我使用getServerSideProps()进行数据加载，因此通常是在服务器端渲染的。 我没有任何index.js文件。

当它以开发模式在本地运行时，它工作得非常好。 部署（到 Vercel）时，除了指向/的链接外，一切都在工作。 <Link href={"/"}>…将从服务器请求 index.json 文件，得到 404 响应并显示错误页面。 为什么？

Answer 1

明白了！

我使用getServerSideProps()根据 slug 获取数据。 （实际内容来自 Sanity.io 并被查询以查看内容的slug属性是否与 URL 中的slug或默认页面 slug 匹配）。

使用next dev在本地开发模式下运行应用程序时，在加载根 ("/") URL 时params.slug参数将undefined 。 无论根 URL 是通过刷新还是导航操作（单击指向 / 的链接，使用后退按钮）加载的，它都具有相同的值。

但是，在部署站点时，此行为会发生变化。 首次加载页面时params.slug仍然undefined ，但如果它加载以响应客户端导航事件，则 slug 突然设置为index 。 由于我既没有带有 slug index的页面，也没有确保在请求index时使用默认 slug，所以我收到了意外的 404 响应。 使用"index"作为触发默认 slug 的值之一来修复它。

我不知道这是否是 Next JS 中的一个错误，但这绝对是一个让我困惑了一段时间的问题。