Optimizing Third-Party Libraries in Next.js with @next/third-parties – Fast, Flexible, and Easy

Getting Started

Install the library:

npm install @next/third-parties@latest next@latest

This package is experimental and updated frequently. Use the latest or canary version for best results.

Google Tag Manager

To load GTM globally:

import { GoogleTagManager } from '@next/third-parties/google'

<GoogleTagManager gtmId="GTM-XYZ" />

To send events:

import { sendGTMEvent } from '@next/third-parties/google'

sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })

Optional props include gtmScriptUrl, dataLayer, auth, and preview.

Google Analytics

To load GA globally:

import { GoogleAnalytics } from '@next/third-parties/google'

<GoogleAnalytics gaId="G-XYZ" />

To send events:

import { sendGAEvent } from '@next/third-parties/google'

sendGAEvent('event', 'buttonClicked', { value: 'xyz' })

GA tracks pageviews automatically on route changes. You can disable this if sending manually.

Google Maps Embed

To embed a map:

import { GoogleMapsEmbed } from '@next/third-parties/google'

<GoogleMapsEmbed
  apiKey="XYZ"
  height={200}
  width="100%"
  mode="place"
  q="Brooklyn+Bridge,New+York,NY"
/>

Supports options like center, zoom, maptype, language, and region.

YouTube Embed

To embed a YouTube video:

import { YouTubeEmbed } from '@next/third-parties/google'

<YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />

This uses lite-youtube-embed under the hood for faster loading.