▲

Beam for Next.js

Add cookie-free, GDPR-compliant analytics to your Next.js application in under 2 minutes. No consent banners. No performance hit. Works with App Router and Pages Router.

Get started free Explore live demo

No credit card required and setup in minutes

Install Beam on Next.js

Replace YOUR_SITE_ID with your Beam site ID from the dashboard.

Option A - Script tag in app/layout.tsx (App Router)

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        <Script
          src="https://beam.keylightdigital.dev/js/beam.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Use strategy="afterInteractive" so Beam loads after hydration with minimal performance impact.

Option B - npm package (any Router)

# Install the package
npm install beam-analytics

# In app/layout.tsx or pages/_app.tsx
import { useBeam } from 'beam-analytics/react'

export default function RootLayout({ children }) {
  useBeam('YOUR_SITE_ID')
  return <>{children}</>
}

The React hook auto-tracks page navigations in both App Router and Pages Router with no custom router events.

Verify your Next.js integration

Use this checklist after publish so you know tracking is actually live in production.

✓ Deploy your Next.js build, then load two different routes in a new browser session.
✓ Open Beam dashboard and select Today; confirm both routes appear in Top Pages.
✓ Check Referrers and Devices cards to confirm non-page metrics are also arriving.

Why Beam works well for Next.js

🍪

No cookies, no consent banner

Beam never sets cookies or stores personal data. Your Next.js app stays GDPR and CCPA compliant with no legal pop-up work.

⚡

Core Web Vitals safe

The script is under 2KB and loads asynchronously, keeping LCP and CLS unaffected in normal production conditions.

▲

App Router and Pages Router

Works with Next.js 13+ App Router, Pages Router, and static exports without server-side refactors.

📊

Readable, decision-ready metrics

Track top routes, channels, referrers, and devices in one dashboard instead of GA-style report sprawl.