ca41952d14
This PR does the following to partially address #31062: - Expands the [Script Component](https://nextjs.org/docs/basic-features/script) page in the core documentation - Adds a `next/script` API reference page
2.3 KiB
2.3 KiB
| description |
|---|
| Optimize loading of third-party scripts with the built-in Script component. |
next/script
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') })
}}
/>
</>
)
}