Skip to content

Create your first app

Search Engine Optimization

0 points

Create your first app

Search Engine Optimization

Assets, Metadata, and CSS

Third-Party JavaScript

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.

Adding Third-Party JavaScript

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.

Using the Script Component

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 time
  • onLoad 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 correctly

Try 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?

Submit
PrevNext