Analytics for
Next.js Apps

2. Next.js App Router

Wrap your root layout:

import { AptabaseProvider } from "@aptabase/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AptabaseProvider appKey="<YOUR_APP_KEY>">{children}</AptabaseProvider>
      </body>
    </html>
  );
}

3. Next.js Pages Router

Wrap in _app:

import { AptabaseProvider } from "@aptabase/react";

export default function App({ Component, pageProps }) {
  return (
    <AptabaseProvider appKey="<YOUR_APP_KEY>">
      <Component {...pageProps} />
    </AptabaseProvider>
  );
}

4. Send a test event

Create a client component that calls trackEvent from a button handler. Track user actions from event handlers, never in the component body or useEffect: React re-renders components for many reasons, and each re-render would be counted as user activity.

"use client";

import { useAptabase } from "@aptabase/react";

export function TestEventButton() {
  const { trackEvent } = useAptabase();

  function handleClick() {
    trackEvent("test_event", { source: "quickstart" });
  }

  return <button onClick={handleClick}>Send test event</button>;
}

Render <TestEventButton /> anywhere inside <AptabaseProvider>, start the app locally (npm run dev) and click the button. Also works with Remix, CRA and Vite — wrap the root with <AptabaseProvider>.

5. Confirm it in the dashboard

Open your app in the Aptabase dashboard and select the Debug build mode with the Bug/Rocket icon at the top right, next to the date picker. Events sent from localhost or with NODE_ENV=development are recorded as Debug; production builds are recorded as Release. Then open Live View from the left menu: your test_event shows up within a few seconds. More on build modes: https://aptabase.com/docs/build-modes