@hiveit/next

hiveit analytics for Next.js: one route so browsers send events first-party, a provider that tracks App Router navigation, and a client for your server code.

1. The proxy route

// app/api/hiveit/e/route.ts
import { createHiveitRoute } from "@hiveit/next";

export const { POST } = createHiveitRoute({
  target: process.env.HIVEIT_URL,
  apiKey: process.env.HIVEIT_WRITE_KEY,
});

Events now travel to your own domain: no CORS, no ad-blocked third-party host, and the write key never reaches the browser. The service's status and body are passed straight back, so the SDK's retries behave as if it had reached the service.

The options are checked on the first request rather than at import, because next build evaluates route modules without your deployment's environment. A route without a target or apiKey answers 500 not_configured and logs the reason once.

2. The provider

// app/layout.tsx
import { HiveitProvider } from "@hiveit/next/client";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <HiveitProvider endpoint="/api/hiveit/e" autocapture>
          {children}
        </HiveitProvider>
      </body>
    </html>
  );
}

$pageview is sent on first render and on every App Router navigation, taken from usePathname/useSearchParams rather than from history events, because the router is the authority on when a route actually changed. Repeated URLs are ignored, so React's double-invoked effects in development do not double-count.

"use client";
import { useAnalytics } from "@hiveit/next/client";

export function BuyButton() {
  const analytics = useAnalytics();
  return <button onClick={() => analytics.track("checkout_started")}>Buy</button>;
}

identify, alias and reset are on the same hook. Everything @hiveit/browser does (anonymous ids in localStorage, an offline queue, autocapture, delivery on page hide) applies here too.

3. The server

// a server action or route handler
import { createClient } from "@hiveit/next/server";

const client = createClient({
  endpoint: `${process.env.HIVEIT_URL}/e`,
  apiKey: process.env.HIVEIT_WRITE_KEY,
});

export async function placeOrder(userId: string) {
  client.capture({ event: "order_placed", distinctId: userId, properties: { total: 4200 } });
  await client.flush(); // a serverless function can be frozen the moment it responds
}

On a long-running server use getSharedClient(...) instead, so batching actually batches, and call resetSharedClient() on shutdown.