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.


npm install ""


The <Partytown/> component is imported from the 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 '';

const Home = () => {
  return (
        <title>My App</title>
        <Partytown debug={true} forward={['dataLayer.push']} />
        <script src="" type="text/partytown" />

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.

    __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"
Made with ❤️ by

© 2024, Inc.

Introducing Visual Copilot.

100% free. Supports all popular frameworks.

Try Visual Copilot