nextjs/no-styled-jsx-in-document 정확성
작동 방식
pages/_document.js에서 styled-jsx 사용을 막습니다.
왜 문제가 되는가?
styled-jsx와 같은 커스텀 CSS는 커스텀 문서에서는 허용되지 않습니다.
예시
이 규칙에 어긋나는 잘못된 코드 예시:
javascript
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<style jsx>{`
body {
background: hotpink;
}
`}</style>
</body>
</Html>
);
}
}이 규칙에 맞는 올바른 코드 예시:
javascript
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}사용 방법
이 규칙을 설정 파일이나 명령줄 인터페이스를 통해 활성화하려면 다음을 사용할 수 있습니다:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-styled-jsx-in-document": "error"
}
}bash
oxlint --deny nextjs/no-styled-jsx-in-document --nextjs-plugin