nextjs/no-head-element 정확성
작동 방식
Next.js 애플리케이션 내에서 기존의 <head> 요소 사용을 차단합니다.
왜 문제가 되는가?
<head> 요소는 Next.js 애플리케이션에서 예기치 않은 동작을 유발할 수 있습니다. 대신, Next.js의 내장 next/head 컴포넌트를 사용하세요.
예시
이 규칙에 대한 잘못된 코드 예시:
jsx
function Index() {
return (
<>
<head>
<title>내 페이지 제목</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
</>
);
}
export default Index;이 규칙에 대한 올바른 코드 예시:
jsx
import Head from "next/head";
function Index() {
return (
<>
<Head>
<title>내 페이지 제목</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
</>
);
}
export default Index;사용 방법
구성 파일 또는 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용하세요:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-head-element": "error"
}
}bash
oxlint --deny nextjs/no-head-element --nextjs-plugin