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"
}

Builder.io is the headless CMS that lets you drag & drop with your components.

Made with ❤️ by

© 2023 Builder.io, Inc.