mediumFrontend

What is next/script and what are its strategy options in Next.js?

Q: What is next/script and what are its strategy options in Next.js?

**TL;DR.** next/script loads third-party scripts with a **strategy**: beforeInteractive (critical, before hydration), afterInteractive (default, after hydration), lazyOnload (browser idle), and worker (off the main thread). It prevents blocking scripts from hurting performance. beforeInteractive pre-hydration afterInteractive default <text class=

1.1k views

Understand the problem

Controlling when third-party scripts load.

nextjsnext-scriptthird-partyperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Load analytics after interactive

import Script from 'next/script';

// analytics: not critical → after hydration
<Script src="https://analytics.example.com/a.js" strategy="afterInteractive" />;

// chat widget: low priority → when the browser is idle
<Script src="https://chat.example.com/w.js" strategy="lazyOnload" />;

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is generateStaticParams in Next.js and how does it enable SSG for dynamic routes?

How does Next.js decide between static and dynamic rendering at build time?