NextJS 部署到 Vercel：找不到 404 页面

Posted 2023-03-06

【中文标题】NextJS 部署到 Vercel：找不到 404 页面

【英文标题】：NextJS deployed to Vercel: 404 page not found

【发布时间】：2021-04-22 13:26:47

【问题描述】：

我有一个没有集成 api 的 NextJS 应用程序，我想将其部署到 Vercel。当我在本地 yarn run dev 运行它时它工作正常，我也可以在没有任何错误的情况下构建它 yarn run build。但是，当我部署 Vercel 时，我收到了 404 Error。

这是我的文件夹结构：

app/
  - components
  - pages
    - editor
      - [id].tsx
    ...tsx
  - public
  - utils
    - db
      api.ts

我正在使用 NextJs 10.0.3。

这是已部署的app 的链接。

我没有 nextjs 配置文件。我的假设是错误是由动态路由引起的，但我找不到我的错误。此外，与只有动态页面相反，部署应用程序时没有页面工作。

你有关于下一步看哪里的指示吗？

编辑 1：Here 是 GitHub 存储库的链接。

编辑 2： 我发现了一个问题，但不知道如何解决。

这是我的构建输出在 Vercel 上的样子：

这是它在 Vercel 上的样子：

不知道为什么整个 _next 文件夹丢失了。

【问题讨论】：

你能告诉我们你的代码吗？

添加了指向 GitHub 存储库的链接

【参考方案1】：

编辑

尝试使用部署 now --prod --force --force 标志将清除您的构建缓存（在生产中）并强制生产推送。 如果仍然无法正常工作，请确保添加 now.json

【讨论】：

我正在使用 Vercel Github 集成进行部署。我认为每次部署时它都会从头开始构建它。我刚刚将它与我成功部署的其他项目进行了比较，并且我没有提供 now.json。所以我怀疑这是必要的。

@siva 尝试添加 now.json。这里有一点帮助 => docs-git-update-lambda-serverless-function.zeit.now.sh/docs/v2/…

@siva 我可以尝试部署您的应用吗？

当然！任何帮助表示赞赏！

【参考方案2】：

我刚刚遇到了同样的问题。 我在子目录中有我的下一个应用程序。我认为这可能是一些问题的原因。

对我有用的是。

确保选择正确的子目录。我的上面有一个 Next Js 小图标。 框架预设需要设置为 Next.js。

【讨论】：

为我工作！更新了我在 Vercel 上的项目的“根目录”，它又可以正常工作了。

【参考方案3】：

我的问题是我第一次尝试通过一个团队部署 Vercel。当我在我的个人 Vercel 帐户下创建一个新的 Vercel 项目并部署相同的代码时，它工作了！我希望这可以节省其他人的时间，因为我刚刚浪费了 3 个小时试图找到它。我也在使用 Next.js。

如果您尝试通过团队进行部署，您可能需要首先在您的 vercel.json 中配置团队 ID，例如

  "currentTeam": "team_ofwUZockJlL53hINUGCc1ONW"

参考：https://vercel.com/docs/configuration#global/config-json/current-team

【参考方案4】：

还要确保选择 Next.js 作为框架预设（而不是其他）。您可以在项目设置和构建和开发设置下找到它。 更多内容：https://vercel.com/docs/concepts/deployments/build-step