Next.js应用部署Vercel失败：npm run build报错1求助

跟着JavaScript Mastery的Next.js教程开发项目，部署到Vercel时触发Command "npm run build" exited with 1错误，核心原因是代码违反多项ESLint规则，具体报错包括JSX单引号使用、缩进错误、行尾空格、文件末尾缺换行、大括号空格、缺少分号、空组件未自闭合、循环依赖等。修改package.json和next.config.js后问题未解决。

方案一：逐个修复ESLint错误（推荐） #

先在本地执行npm run lint，会列出所有违规项，按规则逐一修正：

• jsx-quotes：JSX属性统一使用双引号，例如将<div className='box'>改为<div className="box">
• react/jsx-indent：JSX嵌套元素统一使用4空格缩进，检查组件内的层级缩进是否符合要求
• no-trailing-spaces：删除所有行尾的多余空格
• eol-last：给每个文件末尾添加一个空行
• object-curly-spacing：大括号前后添加空格，例如将import {useState} from 'react'改为import { useState } from 'react'
• semi：所有语句末尾添加分号
• react/self-closing-comp：空组件使用自闭合语法，例如将<div></div>改为<div />
• quotes：普通JavaScript字符串统一使用单引号（与JSX属性的双引号区分）
• import/no-cycle：解决组件循环导入问题，比如A导入B、B又导入A的情况，可将共用逻辑抽离为独立文件，调整导入结构

修复完成后，本地执行npm run build确认无错误，再重新部署到Vercel。

方案二：临时禁用违规ESLint规则（快速应急） #

如果暂时不想逐个修复，可通过配置文件禁用相关规则：

1. 在项目根目录创建或修改.eslintrc.json：

{
  "extends": "next/core-web-vitals",
  "rules": {
    "jsx-quotes": "off",
    "react/jsx-indent": "off",
    "no-trailing-spaces": "off",
    "eol-last": "off",
    "object-curly-spacing": "off",
    "semi": "off",
    "react/self-closing-comp": "off",
    "quotes": "off",
    "import/no-cycle": "off"
  }
}

2. 或者直接让build命令跳过ESLint检查，修改package.json中的build脚本：

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

注意：此方法仅作为临时应急方案，长期来看建议遵循ESLint规则规范代码。

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