如何配置ESLint规则禁止使用next/link的Link组件

API 探路者

2026-9-2

配置方法

你已经正确关闭了@next/next/no-html-link-for-pages规则解除原生a标签的使用限制，要实现禁止使用next/link的Link组件的约束，不需要安装额外ESLint插件，直接用ESLint内置规则即可实现。

基础配置（覆盖90%场景）

在ESLint配置文件中添加no-restricted-imports规则，拦截所有从next/link的导入行为：

{
  "rules": {
    "@next/next/no-html-link-for-pages": "off",
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "next/link",
            "message": "项目内仅允许使用原生<a>标签实现路由跳转，禁止导入next/link的Link组件"
          }
        ]
      }
    ]
  }
}

配置生效后，所有写了import Link from 'next/link'或者import { Link } from 'next/link'的代码，都会直接抛出对应lint错误。

补充配置（拦截动态导入场景）

如果项目中存在动态导入next/link的写法，补充no-restricted-syntax规则拦截即可：

{
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "CallExpression[callee.name='import'][arguments.0.value='next/link']",
        "message": "项目内仅允许使用原生<a>标签实现路由跳转，禁止导入next/link的Link组件"
      }
    ]
  }
}