@next/next/no-sync-scripts

When the browser hits a <script> with a src, it stops reading the HTML until it has downloaded and run the file. Nothing below the tag shows up in the meantime, so a slow third-party server holds up your whole page.

With async or defer, the browser keeps reading the HTML while the file downloads. Script from next/script doesn't block either, and it lets you pick when the script loads.

Configure#

Off by default. To turn it on:

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

Examples#

Reported:

export default function Checkout() {
  return <script src="https://example.com/payments.js" />;
}

Not reported:

export default function Checkout() {
  return <script src="https://example.com/payments.js" defer />;
}

import Script from "next/script";

export default function Checkout() {
  return <Script src="https://example.com/payments.js" />;
}