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?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First Think of guests arriving at a party. The security guard (a consent or bot-check script) must be at the door before anyone comes in. The DJ (analytics) can start once the first guests are inside. The photographer (a chat widget) can arrive when the party is already going. next/script lets you schedule each of them instead of letting everyone crowd through the door at once. ## 2. The Core Idea 📌 **Interview term: next

The problem

Question presented to candidate: "We need Google Tag Manager, a chat widget and a consent script on the site. How do you add third-party scripts in Next.js without hurting performance, and which strategy would each get?"

What a strong answer should cover:

The Script component from next/script loads external or inline scripts once per document, deduplicated, with a loading strategy.
beforeInteractive: before any Next.js code and before hydration; only allowed in the root layout; for scripts that must run first (consent, bot checks).
afterInteractive (default): after some hydration; for analytics and tag managers.
lazyOnload: during browser idle time after all resources load; for chat widgets and social embeds.
worker (experimental) moves a script into a web worker with Partytown; onLoad, onReady and onError callbacks need a Client Component.

Clarifying questions expected:

"Does this script need to run before the page becomes interactive?" — only then beforeInteractive.
"Is it needed on every page or just some?" — place the Script in the layout or page accordingly.

Code / implementation expected: Yes — one script per strategy.

nextjs
next-script
third-party
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

Think of guests arriving at a party. The security guard (a consent or bot-check script) must be at the door before anyone comes in. The DJ (analytics) can start once the first guests are inside. The photographer (a chat widget) can arrive when the party is already going. next/script lets you schedule each of them instead

The solution is hidden so you can try first

4 min read · 8 sections

Read the code

One script per strategy

// app/layout.tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://consent.example.com/cmp.js" strategy="beforeInteractive" />
        <Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX" strategy="afterInteractive" />
      </body>
    </html>
  );
}

// components/Chat.tsx
"use client";
import Script from "next/script";
export function Chat() {
  return <Script src="https://chat.example.com/widget.js" strategy="lazyOnload" onLoad={() => console.log("chat ready")} />;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.