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.
Interview question
What is the main benefit of using next/script for third-party scripts like analytics or chat widgets?
- a.It automatically minifies and bundles external script resources.
- b.It allows these scripts to be executed during the server-side rendering process.
- c.It provides a secure sandboxed environment for untrusted code.
- d.It prevents third-party scripts from blocking the initial page content from rendering.Correct
Why? this is the answer
The card states that next/script "prevents third-party scripts from blocking your page's initial render" to improve performance. While other options relate to performance or security, they are not the primary function of next/script.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
- #next.js
- #react
- #performance
- #web vitals
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles