コンテンツへスキップ
ドキュメントエラーページへのHTMLリンクなし

ページへのHTMLリンクなし

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

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

next/linkコンポーネントを使用せずにページルートへナビゲートするために<a>要素が使用され、不要な全ページのリフレッシュを引き起こしました。

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

解決策

Linkコンポーネントをインポートし、異なるページルートへのアンカー要素をLinkコンポーネントで囲むようにしてください。

変更前

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

変更後

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

オプション

pagesDir

このルールは通常、pagesディレクトリを自動的に見つけることができます。

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

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

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