部署Next.js网站至Vercel后出现404错误求助

问题梳理 #

• 部署初期反复报错：Build完成后未找到名为build的输出目录
• 将Vercel设置里的Output Directory改为.next后部署成功，但访问域名时显示404页面
• 怀疑问题出在package.json配置或项目文件结构上

排查与解决步骤 #

1. 核对package.json的脚本配置 #

Next.js默认用next build生成.next目录，先检查你的package.json里的scripts字段：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

• 如果你的build命令是react-scripts build（这是Create React App的命令），会生成build目录，和Next.js的默认输出冲突，导致初始报错。必须把build命令改回next build。

2. 检查项目文件结构是否合规 #

Next.js的路由依赖固定目录：

• 用Pages Router的项目，必须在根目录下有pages文件夹，且里面要有index.js（或index.tsx）作为首页入口，没有的话部署后会直接404。
• 用App Router的项目，根目录下要有app文件夹，且里面要有page.js（或page.tsx）作为首页。
• 确认页面文件没有放错目录，动态路由、嵌套路由的命名也符合Next.js的规则。

3. 确认Vercel的部署配置正确 #

• Build Command要设为npm run build（用yarn的话就设yarn build），别乱改其他命令。
• Output Directory设为.next是对的，但你可以本地先跑一遍npm run build，看看根目录下有没有生成.next文件夹，要是本地都没生成，那就是构建过程有问题。

4. 扒构建日志找问题 #

从Vercel的构建日志里重点看这些：

• 有没有next build执行失败的提示？比如语法错误、依赖包找不到，这些都会导致构建不完整，即使部署成功也会404。
• 有没有看到“Generated static files successfully”这类提示？确认静态资源生成正常。
• 要是日志里有具体的页面报错，先把那个页面的问题修好再重新部署。

5. 特殊场景排查 #

• 如果你在next.config.js里加了output: 'export'，这时候Next.js会生成out目录，你得把Vercel的Output Directory改成out，同时build命令要改成next build && next export。
• 检查有没有自定义的404页面（pages/404.js或app/404/page.js），别不小心把它设成了默认首页。

内容的提问来源于stack exchange，提问作者ILLUSORY