next.js/packages/third-parties

Experimental @next/third-parties

@next/third-parties is a collection of components and utilities that can be used to efficiently load third-party libraries into your Next.js application.

Note: @next/third-parties is still experimental and under active development.

Usage

Google Third-Parties

YouTube Embed

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

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

export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
}

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 below the fold.

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"
    />
  )
}

To get a better idea of how these components work, take a look at this demo.