@next/third-parties

This page showcases a prototype of the @next/third-parties package that provides wrapper components to load certain third-party resources as efficiently as possible in a Next.js application.

Note: All components are automatically pre-generated from Third Party Capital at build time.

Google Analytics

By using the following component, a Google Analytics 4 tag was included into the page and off-loaded to a web worker using Partytown. This includes the 83 kB gtag script that is required.

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

export default function Page() {
 return (
    <GoogleAnalytics id="G-7GY583TNN9" />
  )
}

Youtube Embed

This component was used to load and display a Youtube Embed approximately 224× faster by using lite-youtube-embed under the hood.

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

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

Google Maps Embed

The following component was used to lazy load a Google Maps Embed using the loading attribute.

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

export default function Page() {
 return (
    <GoogleMapsEmbed
      height={200}
      width="100%"
      mapMode="place"
      parameters="q=Brooklyn+Bridge,New+York,NY"
    />
  )
}