如何让NextJS展示ESLint问题并在检测到问题时终止开发服务？

核心实现思路 #

Next.js 默认不会因ESLint错误终止开发服务器，但通过配置可实现类似Create React App（CRA）的严格校验效果，同时在控制台清晰展示所有ESLint问题。

具体配置步骤 #

1. 确认ESLint规则级别 #

确保你的.eslintrc.json（或对应ESLint配置文件）中，目标规则（包括自定义规则）已设置为错误级别（"error"），示例如下：

{
  "extends": ["next/core-web-vitals"],
  "rules": {
    // 自定义规则设为error级别
    "your-custom-rule": "error",
    // 内置规则示例
    "no-unused-vars": "error"
  }
}

只有error级别的规则，才会触发后续的服务终止逻辑。

2. 修改Next.js配置文件 #

在项目根目录的next.config.js中，开启ESLint的failOnError选项：

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    // 开发环境下，检测到ESLint错误时终止服务
    failOnError: true,
    // 可选：若需警告也终止服务，可设为true
    failOnWarning: false,
  },
}

module.exports = nextConfig

3. 验证效果 #

启动开发服务器：

npm run dev

此时代码中若存在ESLint错误（含自定义规则错误），控制台会展示所有问题详情，且开发服务器直接终止，不会继续运行应用，完全匹配CRA的严格校验行为。

额外说明 #

• 控制台默认会输出所有ESLint问题（错误和警告），无需额外配置即可查看。
• 临时关闭严格模式可将failOnError改为false，或运行命令时添加跳过参数：npm run dev -- --no-lint

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