ページへのHTMLリンクなし

内部Next.jsページへのナビゲーションに<a>要素の使用を防止します。

このエラーが発生した理由

next/linkコンポーネントを使用せずにページルートに移動するために<a>要素が使用され、不要なフルページの更新が発生しました。

ページ間のクライアントサイドのルート遷移を有効にし、シングルページアプリケーションエクスペリエンスを提供するには、Linkコンポーネントが必要です。

修正方法

必ずLinkコンポーネントをインポートし、異なるページルートにルーティングするアンカー要素をラップしてください。

変更前

function Home() {
  return (
    <div>
      <a href="/about">About Us</a>
    </div>
  )
}

変更後

import Link from 'next/link'
 
function Home() {
  return (
    <div>
      <Link href="/about">About Us</Link>
    </div>
  )
}
 
export default Home

オプション

pagesDir

このルールは通常、pagesディレクトリを自動的に検出できます。

モノレポで作業している場合は、pagesDirがpagesディレクトリを見つけるために使用するeslint-plugin-nextのrootDir設定を構成することをお勧めします。

場合によっては、pagesディレクトリを指定してこのルールを直接構成する必要がある場合もあります。これはパスまたはパスの配列にすることができます。

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

参考リンク

• next/link APIリファレンス