Skip to content
Pages Router...OptimizingThird Party Libraries

Third Party Libraries

@next/third-parties is a library that provides a collection of components and utilities that improve the performance and developer experience of loading popular third-party libraries in your Next.js application.

Good to know: @next/third-parties is a new experimental library that is still under active development. We're currently working on adding more third-party integrations.

All third-party integrations provided by @next/third-parties have been optimized for performance and ease of use.

Getting Started

To get started, you must install the @next/third-parties library:

Terminal
npm install @next/third-parties

Google Third-Parties

All supported third-party libraries from Google can be imported from @next/third-parties/google.

Google Tag Manager

The GoogleTagManager component can be used to instantiate a Google Tag Manager container to your page. By default, it fetches the original inline script after hydration occurs on the page.

To load Google Tag Manager for all routes, include the component directly in your custom _app:

pages/_app.js
import { GoogleTagManager } from '@next/third-parties/google'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleTagManager gtmId="GTM-XYZ" />
    </>
  )
}

To load Google Tag Manager for a single route, include the component in your page file:

pages/index.js
import { GoogleTagManager } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />
}

Sending Events

The sendGTMEvent function can be used to track user interactions on your page by sending events using the dataLayer object. For this function to work, the <GoogleTagManager /> component must be included in either a parent layout, page, or component, or directly in the same file.

pages/index.js
import { sendGTMEvent } from '@next/third-parties/google'
 
export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Send Event
      </button>
    </div>
  )
}

Refer to the Tag Manager documentation to learn about the different variables and events that can be passed into the function.

Options

Options to pass to the Google Tag Manager. For a full list of options, read the Google Tag Manager docs.

NameTypeDescription
gtmIdRequiredYour GTM container id.
dataLayerOptionalData layer array to instantiate the container with. Defaults to an empty array.
dataLayerNameOptionalName of the data layer. Defaults to dataLayer.
authOptionalValue of authentication parameter (gtm_auth) for environment snippets.
previewOptionalValue of preview parameter (gtm_preview) for environment snippets.

Google Maps Embed

The GoogleMapsEmbed component can be used to add a Google Maps Embed to your page. By default, it uses the loading attribute to lazy-load the embed below the fold.

pages/index.js
import { GoogleMapsEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return (
    <GoogleMapsEmbed
      apiKey="XYZ"
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />
  )
}

Options

Options to pass to the Google Maps Embed. For a full list of options, read the Google Map Embed docs.

NameTypeDescription
apiKeyRequiredYour api key.
modeRequiredMap mode
heightOptionalHeight of the embed. Defaults to auto.
widthOptionalWidth of the embed. Defaults to auto.
styleOptionalPass styles to the iframe.
allowfullscreenOptionalProperty to allow certain map parts to go full screen.
loadingOptionalDefaults to lazy. Consider changing if you know your embed will be above the fold.
qOptionalDefines map marker location. This may be required depending on the map mode.
centerOptionalDefines the center of the map view.
zoomOptionalSets initial zoom level of the map.
maptypeOptionalDefines type of map tiles to load.
languageOptionalDefines the language to use for UI elements and for the display of labels on map tiles.
regionOptionalDefines the appropriate borders and labels to display, based on geo-political sensitivities.

YouTube Embed

The YouTubeEmbed component can be used to load and display a YouTube embed. This component loads faster by using lite-youtube-embed under the hood.

pages/index.js
import { YouTubeEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}

Options

NameTypeDescription
videoidRequiredYouTube video id.
widthOptionalWidth of the video container. Defaults to auto
heightOptionalHeight of the video container. Defaults to auto
playlabelOptionalA visually hidden label for the play button for accessibility.
paramsOptionalThe video player params defined here.
Params are passed as a query param string.
Eg: params="controls=0&start=10&end=30"
styleOptionalUsed to apply styles to the video container.