Next.js
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
The Next.js <Script/> component provides an experimental worker strategy, which uses Partytown under-the-hood. Please see the Next.js Script documentation for more information.
Below are the instructions if you are not using the experimental Worker Strategy.
Install
npm install "@builder.io/partytown"Configure
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"
}