Next.js 16+ · Component

Script

The Next.js Script component optimizes third-party JavaScript and lets you control when it is fetched and executed. Use strategy to balance startup performance against script availability.

How it works

Import Script from next/script and render it where the script should apply. Next.js controls fetching and execution through a loading strategy; external scripts use src, while inline scripts can provide JavaScript content instead.

Syntax

import Script from 'next/script'
<Script src="URL" strategy="afterInteractive" />

Parameters

Name	Type	Description
`src`	`string`	External absolute URL or internal path; required unless inline JavaScript is supplied.
`strategy`	`string`	Loading mode: `beforeInteractive`, `afterInteractive`, `lazyOnload`, or experimental `worker`.
`onLoad`	`function`	Runs after the script finishes loading.
`onReady`	`function`	Runs after loading and whenever the component mounts.
`onError`	`function`	Runs if the script fails to load.

Returns

A React Script component that renders a Next.js-managed script element.

Key points

next/script provides Next.js-managed loading for third-party JavaScript.
The documented strategies are beforeInteractive, afterInteractive, lazyOnload, and experimental worker.
lazyOnload defers fetching until the browser is idle.
beforeInteractive is server-injected into initial HTML rather than added only after hydration.
afterInteractive runs after hydration has begun or completed for part or all of the page.
A script included in a shared layout is deduplicated across navigation within that layout.

Common mistakes

An external script needs src; omit it only when supplying inline JavaScript.
The worker strategy is experimental and should not be treated as a generally available default.
Use beforeInteractive only when a script must run before Next.js code and hydration.

Example: Load a third-party script lazily

import Script from 'next/script'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://example.com/analytics.js"
          strategy="lazyOnload"
          onLoad={() => console.log('analytics loaded')}
        />
      </body>
    </html>
  )
}

Loads an external analytics script during browser idle time and logs after it finishes loading.

When to use it

Early initialization

A script must be available before the application starts hydrating.

Interactive third-party features

Analytics or widgets are useful soon after the page becomes interactive.

Defer nonessential work

Chat, ads, or noncritical tracking can wait for an idle browser.

Shared layout integration

Several routes need the same external script.

Interview questions

QWhat is the default Script loading strategy, and when is it appropriate?

afterInteractive is the default strategy. It loads the script client-side after some or all hydration and is intended for scripts that should load promptly without preceding first-party Next.js code.

Follow-up: When should beforeInteractive be used? Use it for a script required before Next.js code or page hydration; Next.js places it in the initial server-rendered HTML.

QHow do afterInteractive, lazyOnload, and beforeInteractive differ?

lazyOnload waits for browser idle time, making it suitable for scripts that are not needed for initial interaction. beforeInteractive runs earlier, before Next.js code and hydration.

Follow-up: What trade-off does beforeInteractive introduce? It gives early execution but can make a nonessential third-party script compete with critical startup work.

QHow should a script shared by several App Router routes be loaded?

A script can be placed in a layout to cover multiple routes. Next.js fetches it when that route segment is accessed and ensures it loads only once during navigation within the same layout.

Follow-up: How can you react to lifecycle events? Use onLoad after loading, onReady after loading and each mount, and onError when loading fails.

next/script
App Router layouts
Inline scripts
beforeInteractive
afterInteractive
lazyOnload
worker

Source: Script Component. Checked 2026-10-15.