nextjs/no_page_custom_font 정확성
작동 방식
페이지 전용 사용자 정의 글꼴을 금지합니다.
왜 이 문제가 문제인가요?
- 추가하고 있는 사용자 정의 글꼴이 페이지에 추가되었습니다. 이는 글꼴을 특정 페이지에만 적용하고 전체 애플리케이션에는 적용하지 않습니다.
- 사용자 정의 글꼴이
pages/_document.js내부의 별도 컴포넌트에 추가되었습니다. 이는 자동 글꼴 최적화 기능을 비활성화합니다.
예시
이 규칙에 대해 잘못된 코드 예시:
jsx
// pages/index.jsx
import Head from "next/head";
function IndexPage() {
return (
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap"
rel="stylesheet"
/>
</Head>
);
}
export default IndexPage;이 규칙에 대해 올바른 코드 예시:
jsx
// pages/_document.jsx
import NextDocument, { Html, Head } from "next/document";
class Document extends NextDocument {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap"
rel="stylesheet"
/>
</Head>
</Html>
);
}
}
export default Document;사용 방법
구성 파일 또는 CLI를 통해 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no_page_custom_font": "error"
}
}bash
oxlint --deny nextjs/no_page_custom_font --nextjs-plugin