History

Phil Wolstenholme e93a35bb26 update next/third-parties to use Next 14 or 13 as a peer dependency, instead of just 13 (#57515 ) Just tried to update to 14 but `next/third-parties` looks like it's still expecting us to be on Next 13 ``` Error: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: shop-next@0.1.1 npm ERR! Found: next@14.0.0 npm ERR! node_modules/next npm ERR! next@"^14.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer next@"^13.0.0" from @next/third-parties@14.0.0 npm ERR! node_modules/@next/third-parties npm ERR! @next/third-parties@"^14.0.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! /Users/XXXXXXXX/.npm/_logs/2023-10-26T17_27_38_736Z-eresolve-report.txt ```		2023-10-26 22:05:01 +00:00
..
src	Docs: Add documentation for next/third-parties (#57345 )	2023-10-25 23:07:18 -07:00
package.json	update next/third-parties to use Next 14 or 13 as a peer dependency, instead of just 13 (#57515 )	2023-10-26 22:05:01 +00:00
README.md	Updating Third party capital version. (#54418 )	2023-08-29 23:13:35 +00:00
tsconfig.json	Remove tsconfig extending for @next/thrid-parties package (#53991 )	2023-08-14 14:26:24 +02:00

README.md

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.