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

What it does

Prevents the usage of <a> elements to navigate between Next.js pages.

Why is this bad?

Using <a> elements for internal navigation in Next.js applications can cause:

• Full page reloads instead of client-side navigation
• Loss of application state
• Slower navigation performance
• Broken prefetching capabilities

Next.js provides the <Link /> component from next/link for client-side navigation between pages, which provides better performance and user experience.

Examples

Examples of incorrect code for this rule:

function HomePage() {
  return (
    <div>
      <a href="/about">About Us</a>
      <a href="/contact">Contact</a>
    </div>
  );
}

Examples of correct code for this rule:

import Link from "next/link";

function HomePage() {
  return (
    <div>
      <Link href="/about">About Us</Link>
      <Link href="/contact">Contact</Link>
    </div>
  );
}

External links are allowed:

function HomePage() {
  return (
    <div>
      <a href="https://example.com">External Link</a>
      <a href="mailto:contact@example.com">Email</a>
      <a href="tel:+1234567890">Phone</a>
    </div>
  );
}

How to use

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

CLI

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

Config (.oxlintrc.json)

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

References

• Rule Source