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