Vercel Next.js 在预渲染页面时生成错误

Posted 2023-02-22

【中文标题】Vercel Next.js 在预渲染页面时生成错误

【英文标题】：Vercel Next.js build error while prerendering pages

【发布时间】：2021-08-17 18:05:57

【问题描述】：

我正在我的网站上运行 Vercel 编译，但无法摆脱导出时出现的预渲染错误。 有谁知道发生这种情况的原因并可以帮助我解决这个问题？ 我的 github 和所有代码：https://github.com/M0rilla/MyProfile

对于每个页面都有如上的错误：

    Error occurred prerendering page "/resume". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Error: Export encountered errors on following paths:
21:20:09.541        /
21:20:09.541        /404
21:20:09.541        /500
21:20:09.541        /experiences
21:20:09.542        /resume
21:20:09.542        /skills

我没有自定义 404 或 500 页面。

【问题讨论】：

发生这种情况的原因（无效的反应挂钩调用）直接在错误链接中说明。如果您在阅读那里的信息后不确定为什么您的 react hook 调用无效，请确保将您的 /resume 页面的代码放在这里，否则我们无法提供帮助。

我为我的一个页面添加了代码以供查看。 “页面”目录中包含的所有页面都显示此错误，包括我没有创建的 404 和 500

有一个链接到我的 github，上面有这个问题的项目！

虽然我无法使用 Vercel 部署测试您的代码，但您的问题几乎可以肯定是由于您将 node_modules 文件夹和 .next 构建工件提交给 git，您应该 永远不要。您应该使用node_modules/ 和.next/ 创建一个.gitignore 文件。见docs.github.com/en/github/getting-started-with-github/… 和***.com/questions/1274057/…

你能用这个评论创建一个答案吗？我的生产代码现在工作正常！添加 gitignore 文件并从 repo 中删除这些文件夹救了我。谢谢！

【参考方案1】：

您是否尝试过检查这些情况：

确保将所有非页面移出页面文件夹 检查是否有任何假定道具可用的代码，即使它可能不可用。例如，为所有动态页面的 props 提供默认数据。 检查您可能依赖的任何过时模块 确保您的组件在 getStaticPaths 中启用后处理回退。后备文档 确保您没有尝试导出（下一次导出）启用了服务器端呈现 (getServerSideProps) 的页面

【讨论】：

在“pages”中唯一的非页面是_app.js。我会将代码添加到问题中。我是 Next.js 的新手，所以我无法确定其他情况。

【参考方案2】：

Vercel 会针对下一次构建进行一些自定义工作，因此从本地计算机或 node_modules 文件夹提交 .next 构建工件可能会以不可预测的方式干扰构建，从而给出看似无意义的错误消息。确保不要提交 .next 或 node_modules 以避免这种行为。