Third-Party Integrations

Optimized components for Google Tag Manager, Maps, and YouTube.

Next.js3 min readConcept 53 of 65

The @next/third-parties library

Next.js maintains an official library called @next/third-parties.

It provides heavily optimized, drop-in React components for the most common third-party integrations, specifically from Google.

The Iframe Trap

If you copy-paste the standard <iframe src="https://www.youtube.com/..." /> embed code, the browser will immediately download over 1MB of JavaScript to initialize the YouTube player, even if the user never clicks play.

The Next.js <YouTubeEmbed /> component uses a technique called a 'facade'. It only downloads a static image thumbnail and a lightweight play button. The heavy player JavaScript is only downloaded when the user actually interacts with it.

Implementation

1. Install it: npm install @next/third-parties

2. Import it: import { YouTubeEmbed } from '@next/third-parties/google'

3. Use it: <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />

Iframe vs Optimized Component

Examine the syntax difference between a raw, unoptimized YouTube iframe and the clean, performant Next.js component.

Raw Iframe (Unoptimized)

LegacyVideo.tsx
export default function Video() {
return (
// Downloads 1MB+ of JS immediately!
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/ogfYd705cRs"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
></iframe>
);
}

Next.js Component (Optimized)

OptimizedVideo.tsx
import { YouTubeEmbed } from '@next/third-parties/google';
export default function Video() {
return (
// Only loads a static thumbnail until clicked!
<YouTubeEmbed
videoid="ogfYd705cRs"
height={400}
params="controls=0"
/>
);
}

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How does the Next.js `<YouTubeEmbed />` component achieve such massive performance gains over a standard `<iframe>`?

Remember this

  • Never use raw <iframe> tags for YouTube videos or Google Maps.
  • Install the @next/third-parties package for official Next.js integrations.
  • The <YouTubeEmbed /> component uses a facade to delay loading heavy JavaScript.
  • The package also includes optimized components for Google Tag Manager (GTM) and Google Analytics (GA).

Done with this concept?

Mark it complete to track your progress. No login needed.