← 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 で次のように使用できます：

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース