nextjs/google-font-display 정확성
작동 방식
구글 폰트와 함께 font-display 동작을 강제합니다.
왜 문제가 되는가?
display=optional를 지정하면 텍스트가 보이지 않거나 레이아웃이 이동하는 위험을 최소화할 수 있습니다. 커스텀 폰트가 로드된 후에 교체하는 것이 중요하다면, display=swap를 사용하세요.
예시
이 규칙에 대한 잘못된 코드 예시:
jsx
import Head from "next/head";
export default Test = () => {
return (
<Head>
<link href="https://fonts.googleapis.com/css2?family=Krona+One" rel="stylesheet" />
</Head>
);
};이 규칙에 대한 올바른 코드 예시:
jsx
import Head from "next/head";
export default Test = () => {
return (
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional"
rel="stylesheet"
/>
</Head>
);
};사용 방법
이 규칙을 설정 파일 또는 명령줄 인터페이스에서 활성화하려면 다음을 사용할 수 있습니다:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/google-font-display": "error"
}
}bash
oxlint --deny nextjs/google-font-display --nextjs-plugin