Third-party JavaScript refers to any scripts that are added from a third-party source. Usually, third-party scripts are included in order to introduce newer functionality into a site that does not need to be written from scratch, such as analytics, ads, and customer support widgets.
Let's dive into how we can add a third-party script to a Next.js page.
Open pages/posts/first-post.js
in your editor and find the following lines:
<Head>
<title>First Post</title>
</Head>
In addition to metadata, scripts that need to load and execute as soon as possible are usually added
within the <head>
of a page. Using a regular HTML <script>
element, an external script would be
added as follows:
<Head>
<title>First Post</title>
<script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>
This script contains the Facebook SDK which is commonly used to introduce Facebook social plugins and other functionality. Although this approach works, including scripts in this manner does not give a clear idea of when it would load with respect to the other JavaScript code fetched on the same page. If a particular script is render-blocking and can delay page content from loading, this can significantly impact performance.
next/script
is an extension of the HTML <script>
element and
optimizes when additional scripts are fetched and executed.
In the same file, add an import for Script
from next/script
at the beginning of the file:
import Script from 'next/script';
Now, update the FirstPost
component to include the Script
component:
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}
Notice that a few additional properties have been defined in the Script component:
strategy
controls when the third-party script should load. A value of lazyOnload
tells Next.js to load this particular script lazily during browser idle timeonLoad
is used to run any JavaScript code immediately after the script has finished loading. In this example, we log a message to the console that mentions that the script has loaded correctlyTry accessing http://localhost:3000/posts/first-post. By
using your browser’s developer tools, you should see the message above logged in the Console
panel. In addition, you can run window.FB
to see that the script has populated this global
variable.
Note: The Facebook SDK was only used as a contrived example to show how to add third-party
scripts to your application in a performant way. Now that you understand the basics of including
third-party functionality in Next.js, you can remove the Script component from FirstPost
before
proceeding.
To learn more about the
Script
component, check out the documentation.
Quick Review: What does next/script
simplify for you?