Next.js生产环境构建后页面出现404错误

Question

我建立了一个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的next/link，如果点击会一直加载。正如所说，如果直接访问页面，则显示404错误。

编辑： 而且控制台只显示Ready on http://localhost:3000 -->没有显示任何关于页面构建的日志，不确定这是否应该发生在生产环境中还是只有在开发中才会出现。

- Stefan Januschke

---

你应该为服务器端的动态路由创建自定义服务器。这份文档可能会对你有所帮助。https://nextjs.org/docs#custom-server-and-routing - Saurabh

我已经与客户服务器进行了测试。没有更改任何内容，但找到了错误。问题在于例如 /Product/Overview 的大小写是大写的，在测试中没有问题，因为接下来直接路由并且大小写不是一个问题。但在生产中，链接变得区分大小写，因为大小写很重要。 - Stefan Januschke

你能否请更新你的问题并加入这个修复呢？ :) - Saurabh

Answer 1

TLDR: /pages文件夹中应只包含小写字母。

问题在于文件夹名称和文件（例如/Product/Overview）是大写的，这在测试中没有问题，因为下一个直接路由且大小写不是问题。执行构建版本时，生产环境的文件系统接管了路由。某些操作系统（例如macOS）区分大小写，因此无法正确路由到页面。通过将/pages目录中的所有内容转换为小写来修复该问题。

- Stefan Januschke

---

FYI，这也已经作为一个功能请求提交给下一个团队了（在构建时显示警告）。 - Stefan Januschke

就我个人而言，我的所有字母都是小写的，但我仍然遇到了问题。 - Shivam Kubde

我们可以像 profile-render 这样使用短横线分隔的路由吗？@StefanJanuschke - Amit

解决了我的问题，但我认为Vercel团队需要解决这个问题。 - Or Assayag

Answer 2

在我的情况下，是因为index页面和第二个页面的文件名不同，但由于复制粘贴错误地使用了相同的导出常量名称。

即： 两个文件都有： const Home: NextPage = () => {

解决方法是更改其中一个的名称。

- Lneuner

Answer 3

请确保在“pages”文件夹内没有任何子文件夹。此外，所有文件夹和文件的名称必须为小写。

之前（不起作用）：

之后（起作用）：

- Or Assayag