Skip to content
← All integrations

Next.js

Verified

JavaScript Frameworks · Script tag

Add privacy-friendly analytics to your Next.js application using next/script.

First-class, hand-verified install path (script tag or official plugin).

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          defer
          data-domain="example.com"
          src="https://js.ciphera.net/script.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Set data-domain to the domain you registered in Pulse. Configure feature toggles, SRI, and storage from the install panel in your dashboard.

01 · Next.js + Pulse

Why cookieless analytics fits Next.js

Next.js gives you server-rendered and streamed HTML, and the last thing you want to do is undo that with a heavy, render-blocking analytics tag. Pulse loads through a single next/script include in your root layout — a couple of kilobytes, fetched asynchronously — so it never blocks the server response and never enters your React component tree. Because it is not a component, it adds nothing to your client bundle and costs nothing at hydration.

It also spares you a whole category of App Router plumbing. With cookie-based analytics you would be wiring a consent-mode wrapper around next/script, gating it behind a consent provider, and shipping a banner component in your layout. Pulse sets no cookies, so none of that exists: no consent context, no banner in your tree, no hydration mismatch between the server-rendered banner state and the client. You drop one script tag and you are measuring every visitor.

Compare Pulse and Google Analytics