Back to results for “Performance & Optimization”
Next.js › Third-Party Script Optimization

What is the next/script component, and why should you use it instead of a plain HTML script tag?

Beginner

Answer

The next/script component gives you fine grained control over when and how third party scripts load, letting you choose strategies that avoid blocking the main page content from rendering, unlike a plain script tag which can slow down the initial page load if placed carelessly.
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script src="https://analytics.example.com/script.js" strategy="afterInteractive" />
    </>
  );
}
Real-world example A website adds a third party analytics script using next/script, ensuring it loads without slowing down the initial rendering of the actual page content that visitors care about.

Common follow-ups: What loading strategies are available for the Script component?;Where should the Script component typically be placed in your application?