What is the Next.js Script component?
Why Interviewers Ask This
This question tests conceptual clarity. Interviewers want to hear a precise, confident definition before moving to more complex Next.js topics. It also reveals how well you can explain technical ideas to non-experts.
Answer
Next.js provides a <Script> component (next/script) that controls when and how third-party scripts are loaded, improving performance by avoiding render-blocking scripts. Loading strategies: strategy="beforeInteractive" — loads before the page becomes interactive (blocks). Use for: critical scripts needed before hydration (chat widget that must load immediately). strategy="afterInteractive" (default) — loads after the page becomes interactive. Use for: analytics, tag managers (Google Analytics, GTM). strategy="lazyOnload" — loads during browser idle time after all resources load. Use for: social media widgets, low-priority scripts. strategy="worker" — experimental, loads script in a Web Worker (doesn't block main thread). Usage: import Script from "next/script"; // In layout.tsx or page.tsx: <Script src="https://analytics.example.com/script.js" strategy="afterInteractive" onLoad={() => console.log("Script loaded")} onError={(e) => console.error("Script failed", e)} id="analytics-script" // required for inline scripts />. Inline scripts: <Script id="my-inline-script" strategy="afterInteractive">{`console.log("inline")`}</Script>. Benefits over raw script tags: prevents duplicate script loading across navigation, deduplicates identical scripts, provides loading strategy control, works correctly with Next.js page transitions (script doesn't re-execute on client navigation).
Pro Tip
If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.
Previous
What is Next.js environment variables?
Next
What is the difference between useRouter in Pages Router vs App Router?