Next.js 页面在生产版本中以 404 结尾答案

【问题标题】：Next.js pages end in 404 on production buildNext.js 页面在生产版本中以 404 结尾
【发布时间】：2020-01-22 03:39:59
【问题描述】：

我已经构建了一个 next.js 应用程序。 这些页面在开发环境中运行良好，但如果我尝试运行生产构建只有 index.js 页面正确加载，所有其他页面都以 404 结尾。

npm run build 输出以下内容：

reating an optimized production build ...

Compiled successfully.

Warning: You have opted-out of Automatic Prerendering due to `getInitialProps` in `pages/_app`.
Read more: https://err.sh/next.js/opt-out-automatic-prerendering

Page                                    Size     Files  Packages
┌ σ /                                   66.8 kB      4        27
├   /_app                               17.9 kB      0        31
├   /_document
├   /_error                             397 B        0        27
├ σ /Products/[specificPage]/Dashboard  404 B        4        27
├ σ /Products/Overview                  95.1 kB      9        30
├ σ /Products/Roadmap                   475 B        4        27
├ σ /Strategy/Goals                     451 B        4        27
└ σ /Strategy/Metrics                   459 B        4        27

因此，我假设页面已正确构建。这让我很困惑。

在我的 index.js 页面中，我有一个指向 /strategy/goals 的下一个/链接，如果单击该链接，它将永远加载。如前所述，如果直接访问该页面将显示 404。

编辑：此外，控制台仅在 http://localhost:3000 上显示 Ready --> 不显示任何有关构建页面的日志，不确定这应该发生在生产中还是仅在开发中。

【问题讨论】：

您应该为服务器端的动态路由创建自定义服务器。该文档可能会对您有所帮助。 nextjs.org/docs#custom-server-and-routing
我用客户服务器对其进行了测试。没有改变任何东西，但发现了错误。问题是例如 /Product/Overview 是大写的，这在测试中没有问题，因为 next 直接路由并且 case 没有问题。但在生产中，链接变得区分大小写，因为当时大小写很重要。
您能否通过此修复更新您的问题。 :)

标签： reactjs build next.js production

【解决方案1】：

TLDR： /pages 只能包含小写字母。

（我自己回答）

问题在于文件夹名称和文件（例如 /Product/Overview）大写，这在测试中没有问题，因为 next 直接路由并且大小写没有问题。

执行构建的版本，生产环境的文件系统接管路由。某些操作系统（对我来说是 macOS）区分大小写，并且由于找不到页面而无法正确路由。

通过小写 /pages 目录中的所有内容进行修复。

【讨论】：

仅供参考，这也作为功能请求提交给下一个团队（在构建时显示警告）。
在我的情况下，一切都是小写，但我仍然面临问题。
我们可以有 - 分隔路线，如 profile-render 等。@StefanJanuschke