Executing Additional Code
Event handlers can be used with the Script component to execute additional code after a certain event occurs:
onLoad: Execute code after the script has finished loading.
onReady: Execute code after the script has finished loading and every time the component is mounted.
onError: Execute code if the script fails to load.
These handlers will only work when next/script is imported and used inside of a Client Component where "use client" is defined as the first line of code:app/page.tsx 'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}Refer to the next/script API reference to learn more about each event handler and view examples.