logo-blackPartyTown

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.

Note: The worker strategy is currently unsupported with the Next.js 13+ app directory.

Below are the instructions if you are not using the experimental Worker Strategy.

Install

npm install @qwik.dev/partytown
yarn add @qwik.dev/partytown
pnpm install @qwik.dev/partytown

Configure

The <Partytown/> component is imported from the @qwik.dev/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 "@qwik.dev/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"
}