ActionLab Analytics for Next.js

Add privacy-first, AI-powered analytics to your Next.js site in under 60 seconds. No cookies, no consent banners, no complex setup.

Installation Code

Next.js
// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.actionlabanalytics.com/actionlab.js"
          data-site="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Step-by-Step Setup

  1. 1

    Open your root layout file (app/layout.tsx or pages/_app.tsx).

  2. 2

    Import Script from next/script.

  3. 3

    Add the ActionLab Script component with strategy="afterInteractive".

  4. 4

    Replace YOUR_SITE_ID with your actual site ID.

  5. 5

    Deploy. ActionLab works with both App Router and Pages Router.

Why Use ActionLab with Next.js

  • Works with App Router and Pages Router
  • next/script optimizes loading automatically
  • Tracks client-side navigation (SPA route changes)
  • Zero config — no middleware or API routes needed

Frequently Asked Questions

Does ActionLab track Next.js client-side navigation?

Yes. ActionLab detects client-side route changes in Next.js (both App Router and Pages Router) and records them as pageviews automatically.

Should I use afterInteractive or lazyOnload?

Use afterInteractive for analytics. This loads the script after the page becomes interactive, giving you accurate data without blocking the initial render.