logo标签列表

NextJS 部署到 Vercel 后出现 404 页面未找到的问题。

next.jsvercel
35

我有一个没有整合API的NextJS应用程序，我想部署到Vercel。当我在本地运行它yarn run dev时，它可以正常工作，我也可以构建它yarn run build，没有任何错误。然而，当我将它部署到Vercel时，我收到一个404错误。

这是我的文件夹结构:

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

我正在使用NextJs 10.0.3。

这是部署的应用程序链接。

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

您有关于下一步查找的指针吗？

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

编辑2：我找到了问题，但不知道如何修复它。

这是我在Vercel上的构建输出:

输入图像描述

这是它在Vercel上应该看起来的样子：

输入图像描述

不清楚为什么整个_next文件夹都丢失了。

1
你能展示一下你的代码吗？ - Mohit Chandel
添加了指向 GitHub 存储库的链接。 - siva
10个回答
53

前往项目设置

将框架预设从其他更改为Next.js

重新部署项目。

1
  1. 更改框架预设：前往项目页面 -> 设置选项卡 -> 构建与开发设置 -> 将框架预设从其他更改为Next.js。
  2. 重新部署：部署选项卡列出了所有先前部署的构建。点击垂直省略号（⋮）图标，您将找到再次重新部署该特定构建的选项。
 - Itay Tur
奇怪的解决办法，但对我有效。我实际上不得不选择“其他”，然后再次选择“下一步”。 - undefined
31

我遇到了完全相同的问题。

我的Next应用程序在子目录中，我认为这可能是一些问题的原因。

对我有用的解决方法是：

  • 确保选择正确的子目录。我的子目录上有一个小的 Next Js 图标。
  • 框架预设需要设置为 Next.js。
1
对我有用！在 Vercel 上更新了我的项目的“根目录”，然后它又可以正常工作了。 - Brendan Sluke
尝试删除vercel.json文件，如果这是一个问题，请参考https://github.com/t3-oss/create-t3-app/issues/912。 - Anuraag Barde
这很有帮助。谢谢。 - undefined
3

编辑

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

我正在使用Vercel Github集成进行部署。我认为每次部署时它都会从头开始构建。我刚刚将其与其他我成功部署的项目进行了比较，而对于这些项目，我没有提供now.json文件。因此，我怀疑这是不必要的。 - siva
@siva 试着添加 now.json 文件。这里有一些帮助 => https://docs-git-update-lambda-serverless-function.zeit.now.sh/docs/v2/advanced/configuration/ - Mohit Chandel
1
@siva，我可以尝试部署您的应用程序吗？ - Mohit Chandel
当然！任何帮助都是受欢迎的！ - siva
3
这就是导致我的问题的原因 - 不确定为什么它从Next.js改变了。 - Martin Capodici
2

视频参考CodeGrepper。

1）进入项目。然后设置 => 点击常规选项卡 => 在构建和开发设置中 => 从框架预设中选择Next.js

2）再次部署项目

3）它将正常工作

1
重新部署它，选择了Next.js作为框架。
0
我的问题是我最初尝试通过团队部署Vercel。当我在我的个人Vercel帐户下创建了一个新的Vercel项目并部署了相同的代码时，它起作用了！我希望这能为其他人节省时间，因为我刚刚花了3个小时来找到这个问题。我也在使用Next.js。
如果您正在尝试通过团队进行部署，则可能需要首先在vercel.json中配置团队ID，例如：
{
  "currentTeam": "team_ofwUZockJlL53hINUGCc1ONW"
}

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

0
尝试将您的jsx文件更改为js，这可以解决我的问题。
你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好的回答的更多信息。 - Community
0
在某些情况下，如果上述所有解决方案都没有起作用，你可以尝试重新部署，但要尝试更改“使用现有构建缓存”的检查项。
在我的情况下，我只在裸域名上遇到了404页面未找到的问题（在www域名上运行正常），然后我尝试重新部署并勾选了“使用现有构建缓存”，问题得到解决。
0

我曾经遇到过同样的问题。我的错误是这个：无法解构“useReduxContext（...）”的“store”属性，因为它为空值

如果你正在使用redux，请确保你的store提供者在pages/_app.js级别上，而不是在pages/index.js文件中，像这样：

import { Provider } from 'react-redux';
import '../assert/css/master.scss';
import store from '../store/store';

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接