nextjs/no-styled-jsx-in-document Correctness
What it does
Prevent usage of styled-jsx in pages/_document.js.
Why is this bad?
Custom CSS like styled-jsx is not allowed in a Custom Document.
Examples
Examples of incorrect code for this rule:
javascript
// pages/_document.js
import Document, { Head, Html, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<style jsx>
{`
body {
background: hotpink;
}
`}
</style>
</body>
</Html>
);
}
}Examples of correct code for this rule:
javascript
// pages/_document.js
import Document, { Head, Html, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}How to use
To enable this rule in the CLI or using the config file, you can use:
bash
oxlint --deny nextjs/no-styled-jsx-in-document --nextjs-pluginjson
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-styled-jsx-in-document": "error"
}
}