033732a3e5
Adding GoogleMapsEmbed and YoutubeEmber components into `@next/third-parties` Adding tests and README Each component is tagged with `data-ntpc` attribute cc: @kara @housseindjirdeh @huozhi @gnoff Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com> |
||
---|---|---|
.. | ||
scripts | ||
src | ||
package.json | ||
README.md | ||
tsconfig.json |
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%"
mapMode="place"
parameters="q=Brooklyn+Bridge,New+York,NY"
/>
)
}
To get a better idea of how these components work, take a look at this demo.