NextJS
The Next.js setup is largely the same as the React integration guide, except it goes further into how to add to the NextJS framework’s <Head/> component.
Worker Strategy
As of Next.js v12.1.1-canary.11, the <Script/> component now provides an experimental worker strategy. Please see the Next.js Script documentation for more information.
Install
Below are the instructions if you are not using the experimental Worker Strategy.
npm install @builder.io/partytownConfigure
Below are the instructions if you are not using the experimental Worker Strategy.
The <Partytown/> component is imported from the @builder.io/partytown/react submodule. The config properties are JSX props.
The following is an example of including the <Partytown/> component in a Nextjs page. Notice the <Partytown/> component is in the <Head>, and the example analytics script has the type="text/partytown" attribute.
import Head from 'next/head';
import { Partytown } from '@builder.io/partytown/react';
const Home = () => {
return (
<>
<Head>
<title>My App</title>
<Partytown debug={true} forward={['dataLayer.push']} />
<script src="https://example.com/analytics.js" type="text/partytown" />
</Head>
<main>...</main>
</>
);
};
export default Home;Partytown Script
Add the type="text/partytown" prop for each script that should run from a web worker. The example below is using the React specific way of inlining a script with dangerouslySetInnerHTML.
<script
type="text/partytown"
dangerouslySetInnerHTML={{
__html: '/* Inlined Third-Party Script */',
}}
/>Copy Library Files
Below are the instructions if you are not using the experimental Worker Strategy.
Copy library files to public/~partytown. How the files are copied or served from your site is up to each site’s setup. A partytown copylib CLI copy task has been provided for convenience which helps copy the Partytown library files to the public directory. Below is an example of creating a “partytown” NPM script which could run before the build:
"scripts": {
"build": "npm run partytown && next build",
"partytown": "partytown copylib public/~partytown"
}