Adding index.tsx with the third party components #3
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
housseindjirdeh
suggested changes
Jun 13, 2023
| @@ -0,0 +1,51 @@ | |||
| # `@next/third-parties` | |||
|
|
|||
There was a problem hiding this comment.
Let's add a note at the top that says this is still experimental or early in development, just so folks are aware :)
packages/third-parties/README.md
Outdated
| # `@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 is the Next.js implementation of the [Third Party Capital](https://github.com/GoogleChromeLabs/third-party-capital/) loading recommendations. |
There was a problem hiding this comment.
Suggested change
| This package is the Next.js implementation of the [Third Party Capital](https://github.com/GoogleChromeLabs/third-party-capital/) loading recommendations. | |
| This package uses [Third Party Capital](https://github.com/GoogleChromeLabs/third-party-capital/) under the hood to fetch the best loading recommendations. |
Or something like that
packages/third-parties/README.md
Outdated
|
|
||
| ## Google Analytics | ||
|
|
||
| The `GoogleAnalytics` component loads a Google Analytics 4 tag into the page and off-loaded the execution to a web worker using Partytown. This includes the 83 kB gtag script that is required. |
There was a problem hiding this comment.
Suggested change
| The `GoogleAnalytics` component loads a Google Analytics 4 tag into the page and off-loaded the execution to a web worker using Partytown. This includes the 83 kB gtag script that is required. | |
| 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. |
Also I think we'll have to mention that nextScriptWorkers will have to be enabled for this to work (otherwise it'll fallback to loading after the page is interactive) and that it's not yet supported in the App directory: https://nextjs.org/docs/pages/building-your-application/optimizing/scripts#offloading-scripts-to-a-web-worker-experimental
packages/third-parties/README.md
Outdated
|
|
||
| ## 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. |
There was a problem hiding this comment.
Suggested change
| 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. | |
| 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. |
packages/third-parties/README.md
Outdated
|
|
||
| ## Google Maps Embed | ||
|
|
||
| The `GoogleMapsEmbed` component can be used to lazy load a Google Maps Embed using the loading attribute. |
There was a problem hiding this comment.
Suggested change
| The `GoogleMapsEmbed` component can be used to lazy load a Google Maps Embed using the loading attribute. | |
| 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. |
packages/third-parties/README.md
Outdated
| } | ||
| ``` | ||
|
|
||
| Check out the [demo](https://test-next-script-housseindjirdeh.vercel.app/) |
There was a problem hiding this comment.
Suggested change
| Check out the [demo](https://test-next-script-housseindjirdeh.vercel.app/) | |
| To get a better idea of how these components work, take a look at this [demo](https://test-next-script-housseindjirdeh.vercel.app/). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.