script.md

description
Optimize loading of third-party scripts with the built-in Script component.

next/script

Examples

• Google Tag Manager
• Google Analytics
• Facebook Pixel
• Clerk
• Segment Analytics

Version History

Version	Changes
v11.0.0	next/script introduced.

Note: This is API documentation for the Script Component. For a feature overview and usage information for scripts in Next.js, please see Script Optimization.

Optional Props

src

A path string specifying the URL of an external script. This can be either an absolute external URL or an internal path.

strategy

The loading strategy of the script.

strategy	Description
beforeInteractive	Load script before the page becomes interactive
afterInteractive	Load script immediately after the page becomes interactive
lazyOnload	Load script during browser idle time

onLoad

A method that returns additional JavaScript that should be executed after the script has finished loading.

The following is an example of how to use the onLoad property:

import { useState } from 'react'
import Script from 'next/script'

export default function Home() {
  const [stripe, setStripe] = useState(null)

  return (
    <>
      <Script
        id="stripe-js"
        src="https://js.stripe.com/v3/"
        onLoad={() => {
          setStripe({ stripe: window.Stripe('pk_test_12345') })
        }}
      />
    </>
  )
}