Skip to content

Latest commit

 

History

History
132 lines (100 loc) · 3.94 KB

script.md

File metadata and controls

132 lines (100 loc) · 3.94 KB
Raw
description
Optimize loading of third-party scripts with the built-in Script component.

next/script

Examples
Version History
Version Changes
v12.2.3 onReady prop added.
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
worker Load script in a web worker

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 once after the script has finished loading.

Note: onLoad can't be used with the beforeInteractive loading strategy. Consider using onReady instead.

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

onReady

A method that returns additional JavaScript that should be executed after the script has finished loading and every time the component is mounted.

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

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

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

  return (
    <>
      <Script
        id="google-maps"
        src="https://maps.googleapis.com/maps/api/js"
        onReady={() => {
          new google.maps.Map(ref.current, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
          })
        }}
      />
    </>
  )
}

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