Нет HTML ссылок для страниц

Предотвратите использование элементов <a> для перехода на внутренние страницы Next.js.

Почему произошла эта ошибка

Элемент <a> был использован для перехода на маршрут страницы без использования компонента next/link, что вызвало ненужные полные обновления страницы.

Компонент Link необходим для включения переходов на маршруты на стороне клиента между страницами и предоставления опыта одностраничного приложения.

Возможные способы исправить

Убедитесь, что вы импортировали компонент Link и обернули элементы anchor, которые ведут на разные маршруты страниц.

До:

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

Параметры

Директория pages

Эта правила обычно автоматически находит вашу директорию pages.

Если вы работаете в монорепозитории, мы рекомендуем настроить параметр rootDir в eslint-plugin-next, который pagesDir будет использовать для поиска вашей директории pages.

В некоторых случаях вам также может потребоваться настроить это правило напрямую, предоставив директорию pages. Это может быть путь или массив путей.

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

Полезные ссылки

• Справочник по API next/link