Find where users drop off in your Next.js app.

App Router

1. Sign in to Cuttl, or create a free account. Add your site with its domain. Open the site’s Install tab and copy the Cuttl Tag. It starts with <!-- Start Cuttl -->. You need the code between <script> and </script>.
2. In app/layout.tsx, add it to the <head> as an inline script.
   app/layout.tsxCopy

   const cuttl = String.raw`/* paste the code from between <script> and </script> here */`;
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <head>
           <script dangerouslySetInnerHTML={{ __html: cuttl }} />
         </head>
         <body>{children}</body>
       </html>
     );
   }

3. Deploy.
4. In Cuttl, turn on Journey Insights for heatmaps and recordings, or Web Experiments for A/B tests. Admins can do it on the product’s page or in Settings → Plan & usage. A new workspace starts with both off, and until one is on, Cuttl keeps nothing from your site.

Pages Router

Add the same inline script inside <Head> in pages/_document.tsx.

import { Html, Head, Main, NextScript } from 'next/document';

const cuttl = String.raw`/* paste the code from between <script> and </script> here */`;

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script dangerouslySetInnerHTML={{ __html: cuttl }} />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Check it works

1. Open any page of your live site in a browser.
2. In Cuttl, open the site’s Install tab. It shows when data last arrived, usually within a minute.
3. Nothing yet? View the live page’s source and search for app.cuttl.io to check the Cuttl Tag is there. Then check that the site’s domain in Cuttl matches the address in your browser.

Check on your deployed site. Cuttl only takes data from your site’s domain, so pages on localhost won’t show up.

Good to know

• Use a plain inline script rather than next/script. Its default strategy loads after the page appears, so A/B tests can flash the original version. The Cuttl Tag never blocks the page, so running it first costs nothing.
• If your app sets a Content Security Policy nonce, add nonce={nonce} to the script. The scripts Cuttl adds inherit it.
• To send data through your own domain, use the ready-made Next.js route on Cuttl’s Install tab.
• To leave out your own sessions, open any page of your site once with ?cuttl_ignore=1 at the end of the address.