Docs

Next.js

Add the script once in your root layout and every route is covered, including client-side navigations.

App Router

In app/layout.tsx, load the script with next/script so it never blocks rendering:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="http://localhost:3000/analytics.js"
          data-website-id="YOUR_TRACKING_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

strategy="afterInteractive" loads the script after hydration — the Next.js equivalent of defer.

Pages Router

In pages/_document.tsx, add the script tag to <Head> with defer.

Client-side navigation

Nothing else to do — the script tracks App Router and Pages Router navigations automatically.

Custom events

Fire events from anywhere in your components with the global lumen function (guard for SSR):

window.lumen?.("Signup", { plan: "pro" });