@observejs/nextjs

Single-line Next.js integration for Observe.js.

Wraps @observejs/browser and @observejs/plugin-auto-track with an <ObserveProvider /> component and a usePageView() hook that automatically tracks App Router navigation.

Install

npm install @observejs/nextjs @observejs/browser @observejs/plugin-auto-track

Add your tracking key to .env.local:

NEXT_PUBLIC_OBSERVE_API_KEY=your_key_here

Use (App Router)

// app/layout.tsx
import { ObserveProvider } from "@observejs/nextjs";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ObserveProvider
          apiKey={process.env.NEXT_PUBLIC_OBSERVE_API_KEY!}
          apiUrl="https://observejs.lovable.app/api/public"
        >
          {children}
        </ObserveProvider>
      </body>
    </html>
  );
}

That's it — page views, clicks, and errors flow into your Observe.js dashboard with no further wiring.

API

<ObserveProvider />

| Prop | Type | Description | | ------------------- | ----------- | --------------------------------------------------- | | apiKey | string | Your tracking key. Required. | | disabled | boolean | Skip initialization (useful in dev). | | disablePageViews | boolean | Opt out of automatic page-view tracking. | | plugins | Plugin[] | Extra Observe.js plugins to register. |

usePageView()

Fires a page_view event on every App Router path/search change. The provider calls this for you; call it manually only if you opt out via disablePageViews.

useObserve()

Returns the singleton Observe client for identify(), track(), etc.

"use client";
import { useObserve } from "@observejs/nextjs";

export function CheckoutButton() {
  const observe = useObserve();
  return (
    <button onClick={() => observe.track("checkout_started", { plan: "pro" })}>
      Checkout
    </button>
  );
}

License

MIT