next/script strategies

The Next.js Script component, next/script, is an extension of the HTML <script> element. It enables developers to set the loading priority of third-party scripts anywhere in their application without needing to append directly to next/head, saving developer time while improving loading performance.

With next/script, you decide when to load your third-party script by using the strategy property:

<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />

There are three different loading strategies that can be used:

To see how to implement the script component reffer to its documentation or if you want to know more information on how to handle scripts, look here.


beforeInteractive examples


afterInteractive examples


lazyOnLoad examples