← Back to rules

nextjs/no-html-link-for-pages Correctness

它的作用

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

为什么这不好？

在 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>
  );
}

如何使用

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

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

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["nextjs"],
  rules: {
    "nextjs/no-html-link-for-pages": "error",
  },
});

CLI

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

版本

此规则添加于 v1.7.0。

参考资料

• Rule Source
• Open rule in Oxc Playground