diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md new file mode 100644 index 0000000000000..ba9f45c9e63af --- /dev/null +++ b/docs/basic-features/script.md @@ -0,0 +1,92 @@ +--- +description: Next.js helps you optimize loading third-party scripts with the built-in next/script component. +--- + +# Script Component + +Since version **11**, Next.js has a built-in Script component. + +Example of usage + +```js +import Script from 'next/script' + +// Before + + +// Lazy load FB scripts + + +// Use the onLoad callback to execute code on script load + + +// Loading strategy works for inline scripts too + + +// or + + +// All script attributes are forwarded to the final element + +``` + +## Which third-party scripts to wrap with Script Loader + +We recommend the following Script Loader strategies for these categories of third-party scripts + +| Loading strategy | third-party categories | +| ----------------- | -------------------------------------------------------------------------------------------- | +| beforeInteractive | polyfill.io
Bot detection, security & authentication
User consent management (GDPR) | +| afterInteractive | Tag-managers
Analytics | +| lazyOnload | customer relationship management eg. Google feedback, chat support widget
social networks | diff --git a/test/integration/script-loader/pages/_document.js b/test/integration/script-loader/pages/_document.js index d0b9a63d3a4a1..930580e96dd83 100644 --- a/test/integration/script-loader/pages/_document.js +++ b/test/integration/script-loader/pages/_document.js @@ -30,11 +30,6 @@ export default class MyDocument extends Document { src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentLazyOnload" strategy="lazyOnload" > -