Many applications rely on third-party JavaScript to include different types of functionality, such as analytics, ads, and customer support widgets. However, embedding third-party authored code can delay page content from rendering and affect user performance if it is loaded too early.
Next.js provides a built-in Script component that optimizes loading for any third-party script, while giving developers the option to decide when to fetch and execute it.
Using regular HTML, external scripts would need to be manually appended to next/head:
import Head from 'next/head'; function IndexPage() { return ( <div> <Head> <script src="https://www.googletagmanager.com/gtag/js?id=123" /> </Head> </div> ); }
With the Next.js Script component, you can add it anywhere in the component without needing to usenext/head:
import Script from 'next/script'; function IndexPage() { return ( <div> <Script strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=123" /> </div> ); }
The Script component introduces a strategy property that allows you to decide when to fetch and execute a script for optimal loading. To not negatively affect Largest Contentful Paint (LCP), most third-party scripts should be deferred to load after all the contents of a page has finished loading, either immediately after the page becomes interactive (strategy="afterInteractive") or lazily during browser idle time (strategy="lazyOnload").
next/script