building/third-party-libraries

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

@next/third-parties library purpose

@next/third-parties is a library that provides components and utilities for optimizing the performance and developer experience of loading popular third-party libraries in Next.js applications. All third-party integrations provided have been optimized for performance and ease of use.

@next/third-parties installation

Install @next/third-parties using npm: npm install @next/third-parties@latest next@latest, pnpm: pnpm add @next/third-parties@latest next@latest, yarn: yarn add @next/third-parties@latest next@latest, or bun: bun add @next/third-parties@latest next@latest. The package is currently experimental and under active development; install with latest or canary flags.

Google services available from @next/third-parties

All supported third-party libraries from Google can be imported from @next/third-parties/google. Available components include GoogleTagManager, GoogleAnalytics, GoogleMapsEmbed, and YouTubeEmbed.

GoogleTagManager component behavior

The GoogleTagManager component instantiates a Google Tag Manager container on the page. By default, it fetches the original inline script after hydration occurs on the page. It can be loaded for all routes by including it in the root layout (App Router) or custom _app (Pages Router), or for a single route by including it in the page file.

GoogleTagManager App Router example

Example for App Router in app/layout.tsx: import { GoogleTagManager } from '@next/third-parties/google' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <GoogleTagManager gtmId="GTM-XYZ" /> <body>{children}</body> </html> ) }

GoogleTagManager Pages Router example

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

GoogleTagManager options reference

GoogleTagManager component options: gtmId (Required*) - GTM container ID, usually starts with GTM-. gtmScriptUrl (Optional*) - GTM script URL, defaults to https://www.googletagmanager.com/gtm.js. dataLayer (Optional) - Data layer object to instantiate the container with. dataLayerName (Optional) - Name of the data layer, defaults to dataLayer. auth (Optional) - Value of authentication parameter (gtm_auth) for environment snippets. preview (Optional) - Value of preview parameter (gtm_preview) for environment snippets. *gtmId can be omitted when gtmScriptUrl is provided to support Google tag gateway for advertisers.

sendGTMEvent function for tracking

The sendGTMEvent function tracks user interactions by sending events using the dataLayer object. The GoogleTagManager component must be included in either a parent layout, page, or component, or directly in the same file for this function to work. Called as: sendGTMEvent({ event: 'buttonClicked', value: 'xyz' }).

GoogleAnalytics component behavior

The GoogleAnalytics component includes Google Analytics 4 to the page via the Google tag (gtag.js). By default, it fetches the original scripts after hydration occurs on the page. It can be loaded for all routes by including it in the root layout (App Router) or custom _app (Pages Router), or for a single route by including it in the page file.

GoogleAnalytics App Router example

Example for App Router in app/layout.tsx: import { GoogleAnalytics } from '@next/third-parties/google' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> <GoogleAnalytics gaId="G-XYZ" /> </html> ) }

GoogleAnalytics Pages Router example

Example for Pages Router in pages/_app.js: import { GoogleAnalytics } from '@next/third-parties/google' export default function MyApp({ Component, pageProps }) { return ( <> <Component {...pageProps} /> <GoogleAnalytics gaId="G-XYZ" /> </> ) }

sendGAEvent function for tracking

The sendGAEvent function measures user interactions by sending events using the dataLayer object. The GoogleAnalytics component must be included in either a parent layout, page, or component, or directly in the same file for this function to work. Called as: sendGAEvent('event', 'buttonClicked', { value: 'xyz' }).

GoogleAnalytics automatic pageview tracking

Google Analytics automatically tracks pageviews when the browser history state changes. This means client-side navigations between Next.js routes send pageview data without configuration. To ensure correct measurement, enable Enhanced Measurement in the Admin panel and select the Page changes based on browser history events checkbox.

GoogleAnalytics options reference

GoogleAnalytics component options: gaId (Required) - Measurement ID, usually starts with G-. dataLayerName (Optional) - Name of the data layer, defaults to dataLayer. debugMode (Optional) - Enable Google Analytics debug mode. nonce (Optional) - A nonce for content security policy.

GoogleMapsEmbed component behavior

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

GoogleMapsEmbed example

Example in app/page.js or 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" /> ) }

GoogleMapsEmbed options reference

GoogleMapsEmbed component options: apiKey (Required) - Your api key. mode (Required) - Map mode from Google Maps documentation. height (Optional) - Height of the embed, defaults to auto. width (Optional) - Width of the embed, defaults to auto. style (Optional) - Pass styles to the iframe. allowfullscreen (Optional) - Property to allow certain map parts to go full screen. loading (Optional) - Defaults to lazy, change if embed will be above the fold. q (Optional) - Defines map marker location, may be required depending on map mode. center (Optional) - Defines the center of the map view. zoom (Optional) - Sets initial zoom level of the map. maptype (Optional) - Defines type of map tiles to load. language (Optional) - Defines the language for UI elements and map tile labels. region (Optional) - Defines appropriate borders and labels based on geo-political sensitivities.

YouTubeEmbed component behavior

The YouTubeEmbed component loads and displays a YouTube embed. It loads faster by using lite-youtube-embed under the hood.

YouTubeEmbed example

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

YouTubeEmbed options reference

YouTubeEmbed component options: videoid (Required) - YouTube video id. width (Optional) - Width of the video container, defaults to auto. height (Optional) - Height of the video container, defaults to auto. playlabel (Optional) - A visually hidden label for the play button for accessibility. params (Optional) - Video player params as a query param string, e.g. params="controls=0&start=10&end=30". style (Optional) - Used to apply styles to the video container.

Give your agent this brain