Pulse Logo
Pulse
Back to Integrations

Next.js Integration

The best way to add Pulse to your Next.js application is using the built-in next/script component.

Using App Router (Recommended)

Add the script to your root layout file (usually app/layout.tsx or app/layout.js).

app/layout.tsx
import Script from 'next/script'

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

Using Pages Router

If you are using the older Pages Router, add the script to your custom _app.tsx or _document.tsx.

pages/_app.tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        defer
        src="https://pulse.ciphera.net/script.js"
        data-domain="your-site.com"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

Configuration Options

  • data-domain: The domain name you added to your Pulse dashboard (e.g., example.com).
  • src: The URL of our tracking script: https://pulse.ciphera.net/script.js
  • strategy: We recommend afterInteractive to ensure it loads quickly without blocking hydration.