next/script #

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.

Note: worker is an experimental strategy that can only be used when enabled in next.config.js. See Off-loading Scripts To A Web Worker.

onLoad #

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

Note: onLoad can't be used with the beforeInteractive loading strategy.

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') })
        }}
      />
    </>
  )
}

onError #

A method that executes if the script fails to load.

Note: onError can't be used with the beforeInteractive loading strategy.

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

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        id="will-fail"
        src="https://example.com/non-existant-script.js"
        onError={(e) => {
          console.error('Script failed to load', e)
        }}
      />
    </>
  )
}