Next.js 16+ · Module

next/script

next/script is Next.js’s component for optimizing third-party and inline scripts. Configure its loading timing with strategy and respond to lifecycle events with onLoad, onReady, or onError.

How it works

Import Script from next/script and place it in a page or layout. Next.js manages when the script is fetched and executed through strategy; use event handlers for load or failure callbacks.

Syntax

<Script src="https://example.com/script.js" strategy="afterInteractive" />

Parameters

Name	Type	Description
`src`	`string`	URL or internal path of the external script; required unless the script is inline.
`strategy`	`string`	Controls when the script loads: beforeInteractive, afterInteractive, lazyOnload, or experimental worker.
`onLoad`	`function`	Callback invoked after the script finishes loading.
`onReady`	`function`	Callback invoked after loading and each time the component mounts.
`onError`	`function`	Callback invoked if the script fails to load.

Returns

A React component that renders and manages an optimized external or inline script.

Key points

The required external-script input is src, which accepts an absolute URL or an internal path.
Choose beforeInteractive when the script must run before Next.js code and hydration.
Choose lazyOnload for work that can wait until the browser is idle.
The experimental worker strategy offloads script execution to a web worker using Partytown.
The component can contain inline JavaScript instead of loading an external file.
Use onLoad to run code once an external script has finished loading.

Common mistakes

An external script needs src; omit it only when providing inline JavaScript.
Without an explicit strategy, the script uses afterInteractive.

Example: Load a third-party script after hydration

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="afterInteractive"
          onLoad={() => console.log('analytics loaded')}
        />
      </body>
    </html>
  )
}

Loads an external script after initial hydration and logs when it finishes loading.

When to use it

Early initialization

A library required before application hydration, such as a script that must establish an early browser capability.

Post-hydration third-party integration

An analytics or advertising integration that should load soon after the page becomes interactive.

Idle-time loading

A nonessential widget or integration that should avoid competing with initial page work.

Inline script

A small configuration or bootstrap snippet that does not need a separate JavaScript file.

Interview questions

QWhat problem does next/script solve?

next/script is Next.js’s optimized wrapper for third-party scripts. It lets the application control when scripts are fetched and executed without manually managing ordinary script tags.

Follow-up: How would you choose a strategy for a nonessential analytics script? Use lazyOnload so it waits for browser idle time rather than competing with initial page work.

QHow do the main loading strategies differ?

beforeInteractive loads from the initial server HTML before Next.js code and hydration. afterInteractive loads after some hydration and is the default for scripts that should load early but not before first-party code.

Follow-up: When is beforeInteractive appropriate? Use it only for scripts that must be available before hydration, rather than for ordinary third-party integrations.

QWhat event handlers does the component provide?

onLoad runs after a script finishes loading, onReady runs after loading and whenever the component mounts, and onError runs when loading fails.

Follow-up: Which callback suits setup that must run after remounts? Use onReady, because it runs after loading and on every component mount.

Script Component
strategy
onLoad
onReady
onError

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