nextjs/no-styled-jsx-in-document 正しさ
何を実行するか
pages/_document.js 内での styled-jsx の使用を禁止します。
なぜこれは良くないのか
カスタム CSS である styled-jsx は、カスタムドキュメント では許可されていません。
例
このルールに対する不適切なコードの例：
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>
);
}
}使い方
設定ファイルまたは CLI でこのルールを有効化するには、次のようにします：
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-styled-jsx-in-document": "error"
}
}bash
oxlint --deny nextjs/no-styled-jsx-in-document --nextjs-plugin