跳到内容
文档错误页面禁止 HTML 链接

页面禁止 HTML 链接

防止使用 <a> 元素导航到内部 Next.js 页面。

为什么会出现此错误

使用了 <a> 元素导航到页面路由，但没有使用 next/link 组件，导致了不必要的整页刷新。

需要 Link 组件来启用页面之间的客户端路由转换，并提供单页应用体验。

可能的修复方法

请确保导入 Link 组件，并包裹路由到不同页面的锚元素。

之前

pages/index.js
function Home() {
  return (
    <div>
      <a href="/about">About Us</a>
    </div>
  )
}

之后

pages/index.js
import Link from 'next/link'
 
function Home() {
  return (
    <div>
      <Link href="/about">About Us</Link>
    </div>
  )
}
 
export default Home

选项

pagesDir

此规则通常可以自动定位你的 pages 目录。

如果你在 monorepo 中工作，我们建议在 eslint-plugin-next 中配置 rootDir 设置，pagesDir 将使用它来定位你的 pages 目录。

在某些情况下，你可能还需要通过提供 pages 目录来直接配置此规则。这可以是一个路径或路径数组。

eslint.config.json
{
  "rules": {
    "@next/next/no-html-link-for-pages": ["error", "packages/my-app/pages/"]
  }
}