@next/next/no-css-tags

A stylesheet you add with a <link> element skips the Next.js build. It isn't minified or split by page, and its URL has no hash, so browsers can keep showing an old copy after a deploy. If you import the file, Next.js does all of that.

The rule reports a <link> with rel="stylesheet" and an href that's a plain string. An href that starts with http:// or https:// is allowed, because you can't import a file from another site.

Configure

Off by default. To turn it on:

[lint.rules]
"@next/next/no-css-tags" = "error" # or "warn"

Examples

Reported:

export default function Layout({ children }) {
  return (
    <div>
      <link rel="stylesheet" href="/styles/site.css" />
      {children}
    </div>
  );
}

Not reported:

import "../styles/site.css";

export default function Layout({ children }) {
  return <div>{children}</div>;
}

const theme = <link rel="stylesheet" href="https://example.com/theme.css" />;