← Back to rules

nextjs/no-html-link-for-pages 正确性

它的作用

阻止在 Next.js 页面之间使用 <a> 元素进行导航。

为什么这是不好的？

在 Next.js 应用中使用 <a> 元素进行内部导航可能导致：

• 发生完整页面刷新，而非客户端导航
• 应用状态丢失
• 导航性能变慢
• 预加载功能失效

Next.js 提供了来自 next/link 的 <Link /> 组件，用于在页面间实现客户端导航，能够提供更佳的性能和用户体验。

示例

此规则的错误代码示例：

function HomePage() {
  return (
    <div>
      <a href="/about">关于我们</a>
      <a href="/contact">联系我们</a>
    </div>
  );
}

此规则的正确代码示例：

import Link from "next/link";

function HomePage() {
  return (
    <div>
      <Link href="/about">关于我们</Link>
      <Link href="/contact">联系我们</Link>
    </div>
  );
}

外部链接是被允许的：

function HomePage() {
  return (
    <div>
      <a href="https://example.com">外部链接</a>
      <a href="mailto:contact@example.com">电子邮件</a>
      <a href="tel:+1234567890">电话</a>
    </div>
  );
}

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-html-link-for-pages": "error"
  }
}

CLI

oxlint --deny nextjs/no-html-link-for-pages --nextjs-plugin

参考资料

• 规则源码