@next/next/no-script-component-in-head

Head from next/head is for plain tags such as <title>, <meta> and <link>. The Script component from next/script doesn't work inside it. Script decides where its tag goes, so put it anywhere else in the page.

The rule reports a <Script> that's a direct child of the default import of next/head.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"@next/next/no-script-component-in-head" = "error" # or "warn"

Examples#

example.jsx1 problem

import Head from "next/head";
import Script from "next/script";

export default function Home() {
  return (
    <Head>
      <title>Home</title>
      <Script src="https://example.com/widget.js" />
    </Head>
  );
}

example.jsxNo problems

import Head from "next/head";
import Script from "next/script";

export default function Home() {
  return (
    <>
      <Head>
        <title>Home</title>
      </Head>
      <Script src="https://example.com/widget.js" />
    </>
  );
}