跳到内容
文档错误页面没有 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 目录。

如果您正在单体仓库中工作，我们建议在 eslint-plugin-next 中配置 rootDir 设置，pagesDir 将使用此设置来定位您的 pages 目录。

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

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