nextjs/no-css-tags Correctness
✅ This rule is turned on by default.
What it does
Prevents manual inclusion of stylesheets using <link> tags in Next.js applications. This rule checks for <link> tags with rel="stylesheet" that reference local CSS files.
Why is this bad?
Next.js handles CSS imports automatically through its built-in CSS support. Manual stylesheet inclusion bypasses Next.js's built-in CSS optimization, prevents proper code splitting and optimization of styles, and may cause Flash of Unstyled Content (FOUC). This also breaks automatic CSS hot reloading during development.
Examples
Examples of incorrect code for this rule:
jsx
// Manually including local CSS file
<link href="/_next/static/css/styles.css" rel="stylesheet" />
// In pages/_document.js
<Head>
<link href="css/my-styles.css" rel="stylesheet" />
</Head>Examples of correct code for this rule:
jsx
// Importing CSS file directly
import "../styles/global.css";
// Using CSS Modules
import styles from "./Button.module.css";
// Using external stylesheets (allowed)
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet"
/>;
// Using styled-jsx
<style jsx>
{`
.button { color: blue; }
`}
</style>;How to use
To enable this rule in the CLI or using the config file, you can use:
bash
oxlint --deny nextjs/no-css-tags --nextjs-pluginjson
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-css-tags": "error"
}
}