← 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를 통해 활성화하려면 다음을 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

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

CLI

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

참고 자료

• 규칙 소스