Optimize Loading with next/script
The `next/script` component prevents third-party scripts from blocking your page's initial render. Use it for analytics, ads, or chat widgets to improve performance. The footgun is not choosing the laziest strategy possible for non-essential scripts.
WHY IT EXISTS Standard <script> tags can block a page from rendering while they download and execute. This is especially harmful for third-party scripts, which can be slow and hurt your site's Core Web Vitals. next/script was created to solve this by giving developers explicit control over script loading priority.
THE MENTAL MODEL Think of next/script as a traffic controller for external scripts. Instead of letting every script rush onto the page at once and cause a jam, you tell each one when it's allowed to go: before the page is interactive, right after, or only when the browser is completely idle.
HOW IT WORKS You replace a standard <script> tag with <Script> from next/script. The key is the strategy prop, which dictates loading behavior. The three main strategies are: beforeInteractive for critical scripts needed before the page is usable, afterInteractive (the default) for scripts that can run once the page is interactive, and lazyOnload for low-priority scripts that can wait until the browser has idle time.
WHEN TO USE IT Use next/script for any third-party script that isn't essential for the initial page content to appear. This includes analytics providers (Google Analytics), ad services, customer support chat widgets (Intercom), and tag managers (Google Tag Manager).
WHEN NOT TO USE IT It's almost always the right tool for external scripts. The only exception might be critical polyfills that must execute before any React code runs, but even then, the beforeInteractive strategy is the intended path. For most third-party additions, next/script is the correct and optimized choice.
ONE CANONICAL EXAMPLE To add Google Analytics without blocking the main thread, you use the lazyOnload strategy. The code would be: <Script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID" strategy="lazyOnload" />. This tells Next.js to wait until after the page is fully loaded and the browser is idle before fetching and running the analytics script, ensuring it has zero impact on initial load performance.
Read the original → nextjs.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.