ページに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設定を構成することをお勧めします。rootDir。

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

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

便利なリンク

• next/link APIリファレンス