当访问不存在路径时，会渲染首页问题

问题描述

使用 nextjs 开发，本地开发时是正常的，在本地构建打包后运行也是正常跳转到 404 页面。

但是一旦部署到线上，就会出现访问不存在路径时，会渲染首页的问题。

问题解决

通过以上描述，我们可以得出，本地是正常的，线上是异常的。

所以我们需要针对线上环境去排查。

公司使用的是 Cloudflare 的 Pages 服务。

因此我们需要去翻阅 Cloudflare 的 Pages 文档。

在页面左侧，我们可以看见文档的目录。

我们需要翻阅的是关于配置的部分。

在提供页面这一节，我们可以找到用于 Pages 的默认行为。

其中，就有我们目前所遇到的关于 404 的行为。

在 未找到行为 这一部分，我们可以得知，Pages 将默认渲染最近的 404.html 页面。

比如 /blog/404.html, /user/404.html ，直到 /404.html 。

而我们的 404 页面通过打包后，是 /404/index.html 文件。

Pages 在未找到 /404.html 后，将假定部署的是 SPA 项目，于是默认将所有传入路径传递给根路径，让根路径来进行匹配和响应。

问题发生原因已经确定，我们做对应的更改即可。

目前选择的方案是在项目构建完成后执行脚本，将对应的 /404/index.html 重命名为 /404.html。