Next.js 15中添加Airbnb编码规范的依赖冲突问题

一、解决eslint-config-airbnb与eslint-plugin-react-hooks的版本冲突 #

你的核心问题是Next.js 15自带的eslint-config-next@15.0.1依赖eslint-plugin-react-hooks@^5.0.0，但eslint-config-airbnb@19.0.4仅支持eslint-plugin-react-hooks@^4.3.0，导致依赖解析失败。有两种可行方案：

方案1：使用--legacy-peer-deps绕过peer依赖检查（推荐） #

无需手动降级eslint-plugin-react-hooks，直接用npm的旧版peer依赖解析逻辑安装：

npm install --save-dev eslint-config-airbnb --legacy-peer-deps

这种方式不会破坏Next.js原有依赖，且eslint-plugin-react-hooks@5.x和airbnb要求的4.x在功能上完全兼容，不会引发实际运行问题。

方案2：固定兼容的依赖版本 #

如果你坚持满足严格的peer依赖，可以在package.json中手动指定兼容版本后再安装：

1. 卸载高版本的eslint-plugin-react-hooks：

npm uninstall eslint-plugin-react-hooks

2. 安装airbnb要求的版本：

npm install --save-dev eslint-plugin-react-hooks@4.6.2

3. 再安装eslint-config-airbnb：

npm install --save-dev eslint-config-airbnb

二、解决eslint-config-airbnb-typescript的循环依赖问题 #

出现循环依赖通常是因为eslint-config-airbnb-typescript要求的@typescript-eslint系列包版本，与Next.js 15自带的版本不匹配。解决步骤如下：

1. 查看Next.js 15对应的@typescript-eslint版本（可在package-lock.json中搜索@typescript-eslint/parser），Next.js 15一般适配@typescript-eslint@^8.0.0。
2. 安装与该版本兼容的依赖，同时加上--legacy-peer-deps避免冲突：

npm install --save-dev eslint-config-airbnb-typescript @typescript-eslint/parser@^8.0.0 @typescript-eslint/eslint-plugin@^8.0.0 --legacy-peer-deps

3. 在.eslintrc.json中配置extends，注意Next.js配置需放在最前面：

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

关键说明 #

• 不要盲目手动指定单个依赖版本，这很容易陷入循环依赖陷阱，--legacy-peer-deps是当前解决这类npm版本冲突最便捷且安全的方式。
• 如果使用pnpm或yarn，对应的参数是--shamefully-hoist（pnpm）或--legacy-peer-deps（yarn 2+）。

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