Next.js(v14)开发时ESLint错误为何不在浏览器中显示？

1. 配置Next.js的ESLint行为 #

Next.js 14默认不会把ESLint错误推送到浏览器，需要在项目根目录的next.config.js中手动开启相关配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    // 开发编译时持续运行ESLint检查
    ignoreDuringBuilds: false,
    // 开启ESLint错误在浏览器中展示
    emitErrors: true,
    // 可选：将ESLint警告当作错误处理，强制修复后才能继续开发
    emitWarnings: true,
  },
};

module.exports = nextConfig;

2. 确保ESLint配置文件合规 #

检查项目根目录的.eslintrc.json（或.eslintrc.js），确保继承了Next.js官方配置并启用自定义规则：

{
  "extends": ["next/core-web-vitals", "eslint:recommended"],
  "rules": {
    // 示例自定义规则
    "no-unused-vars": "error",
    "prefer-const": "error"
  }
}

3. 实现启动前ESLint检查（强制中断效果） #

如果希望启动开发服务前先执行ESLint检查，发现错误就终止服务，修改package.json的scripts：

{
  "scripts": {
    "dev": "next lint && next dev",
    "lint": "next lint"
  }
}

此后运行npm run dev时，会先执行ESLint检查，存在错误则直接停止启动流程，达到“中断”运行的效果。

4. 补全必要依赖（若缺失） #

确保项目已安装ESLint及Next.js适配插件：

npm install eslint eslint-config-next --save-dev

配置完成后，开发期间的ESLint错误会像CRA一样在浏览器中展示全屏提示，满足你实时查看并强制修复错误的需求。

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