vercel/next.js

third-parties

Purpose

@next/third-parties provides optimized integrations for common third-party scripts: Google Tag Manager, Google Analytics, Google Maps embed, YouTube embed. Each integration is a thin React component that wraps next/script with the correct loading strategy, deduplication keys, and lazy-loading behavior so users do not need to wire it up by hand.

Source: packages/third-parties/src/.

Directory layout

packages/third-parties/
├── README.md
├── google.d.ts          # Public type re-export
├── src/
│   ├── google/          # Google Tag Manager, Analytics, Maps embed, YouTube
│   └── (other vendors as added)
└── package.json

Components shipped

The Google integrations under packages/third-parties/src/google/:

Component	What it loads	Loading strategy
`GoogleTagManager`	The GTM container	`afterInteractive`
`GoogleAnalytics`	The GA4 measurement script	`afterInteractive`
`GoogleMapsEmbed`	An iframe-based map (no API key needed)	Lazy via IntersectionObserver
`YouTubeEmbed`	A YouTube embed with thumbnail-first paint	Lazy with poster image

Each is a simple React component that the user drops into their layout / page:

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

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <GoogleTagManager gtmId='GTM-XYZ' />
      </body>
    </html>
  );
}

Why it exists

The framework's next/script already supports the strategy prop. @next/third-parties adds:

Per-vendor sane defaults — every third party has a recommended loading order (e.g., GTM should load before GA fires custom events).
Web Vitals friendliness — embeds use IntersectionObserver / loading="lazy" so they don't block LCP.
Type safety — the props (e.g., gtmId, videoid) are typed and validated.
Discoverability — users can import the right component instead of copy-pasting a <Script> snippet.

Relationship to `next/script`

next/script is the underlying primitive. @next/third-parties/google components mostly render <Script> plus a small piece of vendor-specific glue (e.g., a <noscript> iframe fallback for GTM, or an onLoad that calls gtag('js', new Date())).

Adding a vendor

To add a new vendor:

Create packages/third-parties/src/<vendor>/<Component>.tsx.
Wrap <Script> with the correct strategy and onLoad.
Export from packages/third-parties/src/<vendor>/index.ts.
Update packages/third-parties/package.json exports to expose the import path.

Key source files

File	Purpose
`packages/third-parties/src/google/`	Google integrations
`packages/next/src/client/script.tsx`	The underlying `next/script` primitive

Built by Factory AutoWiki from public repository content. It is a generated preview for codebase exploration, not source-maintained documentation.