Next.js

Integration

Add Analytics to Next.js in 5 Minutes

Drop a single script tag into your Next.js layout and start tracking pageviews, traffic sources, and revenue instantly. Works with both the App Router and Pages Router.

Start free trial

How to set up

  1. 1

    Add the tracking script (App Router)

    Import next/script and add the DataSaaS tracking script to your root layout. The afterInteractive strategy ensures it loads without blocking your page render.

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          data-website-id="ds_abc123def456"
          data-domain="yourdomain.com"
          src="https://yourdomain.com/js/script.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}
  2. 2

    Or add for Pages Router

    If you use the Pages Router, add the script to your _app.tsx file instead. The same script tag works identically in both routers.

    // pages/_app.tsx
import Script from 'next/script'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        defer
        data-website-id="ds_abc123def456"
        data-domain="yourdomain.com"
        src="https://yourdomain.com/js/script.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp
  3. 3

    Verify tracking is working

    Open your Next.js app in the browser and navigate between a few pages. Then check your DataSaaS dashboard — pageviews should appear in real time. The script automatically handles client-side navigation by intercepting the History API.

What you get

  • Automatic SPA navigation tracking — catches all client-side route changes via History API
  • Works with both App Router (Next.js 13+) and Pages Router out of the box
  • Zero dependencies, no npm package required — just a script tag
  • Non-blocking load with next/script afterInteractive strategy
  • Full support for dynamic routes, parallel routes, and intercepting routes
  • Optional cookieless mode for GDPR compliance without consent banners

Frequently asked questions

Does DataSaaS handle Next.js client-side navigation automatically?

Yes. The tracking script intercepts the History API (pushState and replaceState) to detect client-side route changes. Every navigation in your Next.js app is tracked automatically without any additional code.

Will the tracking script affect my Core Web Vitals?

No. The script loads with the afterInteractive strategy and is fully asynchronous. It does not block rendering, does not add to your Largest Contentful Paint, and has minimal impact on Total Blocking Time. The script itself is lightweight with zero external dependencies.

Can I track custom events like signups or button clicks in Next.js?

Yes. DataSaaS exposes a global datasaas.track() function that you can call from any client component. Use it to track signups, form submissions, button clicks, or any custom event alongside your automatic pageview tracking.

Connect Next.js in minutes

Start your 14-day free trial. No credit card required.

Start free trial