Skip to content
whisperr

Next.js

Next.js (App Router) bindings for @whisperr/web.

Terminal window
npm i @whisperr/next @whisperr/web

Quickstart

Section titled “Quickstart”

app/layout.tsx (a server component — the provider is a client boundary):

import { WhisperrProvider } from "@whisperr/next";


export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <WhisperrProvider apiKey={process.env.NEXT_PUBLIC_WHISPERR_KEY!}>
          {children}
        </WhisperrProvider>
      </body>
    </html>
  );
}

Then in any client component:

"use client";
import { useWhisperr } from "@whisperr/next";


export function CancelButton() {
  const whisperr = useWhisperr();
  return <button onClick={() => whisperr.track("subscription_cancelled")}>Cancel</button>;
}

Pageviews are auto-captured via the History API, which covers Next.js client navigation.

The key is NEXT_PUBLIC_ and ships in the bundle by design — the ingestion key is publishable.

Tracking server-side events too (API routes, server actions, webhooks)? Use @whisperr/node alongside — same external_user_id, same timeline.