diff --git a/packages/third-parties/README.md b/packages/third-parties/README.md new file mode 100644 index 0000000000000..2539b7c1997e6 --- /dev/null +++ b/packages/third-parties/README.md @@ -0,0 +1,53 @@ +# `@next/third-parties` + +`@next/third-parties` is collection of components that can be used to efficiently load third party libraries into your Next.js application. +This package uses [Third Party Capital](https://github.com/GoogleChromeLabs/third-party-capital/) under the hood to fetch the best loading recommendations. + +> Note: `@next/third-parties` is still experimental and under active development + +# Usage + +## Google Analytics + +The `GoogleAnalytics` component loads a Google Analytics 4 tag into the page and off-loads the execution to a web worker using Partytown. This includes the 83 kB gtag script that is required. + +```js +import { GoogleAnalytics } from '@next/third-parties' + +export default function Page() { + return +} +``` + +## Youtube Embed + +The `YoutubeEmbed` component is used to load and display a YouTube embed. This component loads approximately 224× faster by using [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) under the hood. + +```js +import { YoutubeEmbed } from '@next/third-parties' + +export default function Page() { + return +} +``` + +## Google Maps Embed + +The `GoogleMapsEmbed` component can be used to include a [Google Maps Embed](https://developers.google.com/maps/documentation/embed/get-started) to your page. By default, it uses the `loading` attribute to lazy-load below the fold. + +```js +import { GoogleMapsEmbed } from '@next/third-parties' + +export default function Page() { + return ( + + ) +} +``` + +To get a better idea of how these components work, take a look at this [demo](https://test-next-script-housseindjirdeh.vercel.app/). diff --git a/packages/third-parties/src/index.tsx b/packages/third-parties/src/index.tsx new file mode 100644 index 0000000000000..e6fa4784d8061 --- /dev/null +++ b/packages/third-parties/src/index.tsx @@ -0,0 +1,56 @@ +/** + * This is an autogenerated file by update-third-parties.js + */ +import React from 'react' +import Script from 'next/script' + +import Base from './base' + +// Install a Google Analytics tag on your website +export function GoogleAnalytics(args: any) { + return ( + +