No HTML link for pages

이 문제가 의미하는 것

Next.js의 내부 페이지로 이동할 때 일반 HTML <a>를 사용하면 브라우저가 새 문서 전체를 요청합니다. Next.js는 내부 이동에 next/link의 Link를 사용해야 클라이언트 라우팅과 페이지 전환을 적용할 수 있다고 설명합니다.

먼저 확인할 항목

1. 린트에 @next/next/no-html-link-for-pages가 표시되는지 확인합니다.
2. 내부 링크를 클릭했을 때 Network 패널에 문서 요청이 새로 발생하고 화면 전체가 깜박이는지 확인합니다.
3. 코드에서 href="/about", href="/products/..."처럼 같은 애플리케이션의 경로를 가리키는 <a>를 찾습니다.
4. 외부 사이트, 파일 다운로드, 다른 프로토콜 링크는 내부 경로와 분리해 기록합니다.

수정 방법

같은 Next.js 애플리케이션의 페이지로 이동하는 링크는 next/link를 사용합니다.

import Link from 'next/link';export function Header() {  return (    <nav>      <Link href="/about">서비스 소개</Link>      <Link href="/guides">가이드</Link>    </nav>  );}

외부 URL이나 브라우저가 파일을 내려받아야 하는 링크는 일반 <a>를 사용할 수 있습니다. 내부 경로인지 외부 URL인지 구분하지 않고 모든 <a>를 일괄적으로 Link로 바꾸지 마십시오.

수정 후 판정

• 내부 경로 클릭 시 문서 전체 새로고침 없이 대상 페이지가 표시됩니다.
• 해당 링크에서 @next/next/no-html-link-for-pages 린트 오류가 사라집니다.
• 외부 URL과 다운로드 링크의 동작은 변경되지 않습니다.

주의

Pages Router와 App Router의 실제 경로 구조를 확인한 뒤 내부 링크 범위를 정하십시오. 린트 오류만 숨기기 위해 규칙을 비활성화하지 말고, 링크의 목적이 내부 이동인지 외부 이동인지 먼저 확인하십시오.