`<Script>`

Loads third-party scripts with optimized loading strategies.

Since Next 13 (App Router) Spec ↗

Syntax

import Script from 'next/script'; <Script src="..." strategy="..." />

Parameters

Name	Type	Required	Description
`src`	`string`	No	External script URL (omit for inline scripts).
`strategy`	`'beforeInteractive' \| 'afterInteractive' \| 'lazyOnload' \| 'worker'`	No	When to load the script (default `afterInteractive`).
`onLoad / onReady / onError`	`function`	No	Lifecycle callbacks (client components only).

Returns

ReactElement — Injects and manages the script load.

Examples

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://www.googletagmanager.com/gtag/js?id=G-XXX"
        strategy="afterInteractive"
      />
    </>
  )
}

'use client'
import Script from 'next/script'

export function Widget() {
  return (
    <Script
      src="https://widget.example.com/embed.js"
      strategy="lazyOnload"
      onLoad={() => console.log('widget ready')}
    />
  )
}

Notes

`beforeInteractive` must be placed in the root layout and loads before hydration (use sparingly). `afterInteractive` (default) loads right after hydration; `lazyOnload` waits for idle. `onLoad`/`onError` require a client component. Use `worker` (experimental Partytown) to offload to a web worker.