# Cookieless analytics for Next.js in 2 minutes

> Add privacy-first product analytics to a Next.js App Router project: install, init once, track what matters.

Guides · 2026-09-23 · Shipabase team · Source: https://shipabase.dev/blog/cookieless-analytics-nextjs

## TL;DR

- Install `@shipabase/js`: zero dependencies, about 2 KB gzipped.
- Call `init` once in a client providers component.
- Track a handful of meaningful events. No cookie banner needed for the SDK itself.

## 1. Install

`Terminal`

```bash
npm i @shipabase/js
```

`.env.local`

```bash
NEXT_PUBLIC_SHIPABASE_KEY=SB-EU-xxxxxxxxxx
```

## 2. Call init once, on the client

`app/providers.tsx`

```tsx
"use client";

import { useEffect } from "react";
import { init } from "@shipabase/js";

export function Providers({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    init(process.env.NEXT_PUBLIC_SHIPABASE_KEY!);
  }, []);
  return <>{children}</>;
}
```

Wrap `{children}` in `app/layout.tsx` with `<Providers>`. Never call `init` in a Server Component.

## 3. Track what matters

`any client component`

```tsx
import { trackEvent } from "@shipabase/js";

trackEvent("project_created", { plan: "pro" });
```

- Name events in `snake_case`, `object_verb`, past tense: `signup_completed`, `invoice_sent`.
- 5 to 15 events is typical. Track actions, not every click.
- Keep props anonymous: plan, count, variant. Never emails or user IDs.

## Why no cookie banner?

The SDK stores nothing in the browser: no cookies, no localStorage. Visitors are counted with an anonymous hash that changes every day. See [how visitors are counted](https://shipabase.dev/docs/privacy) for the details.

## FAQ

**Does it work with the Pages Router?**

Yes. Call init in a useEffect in pages/_app.tsx.

**Are page views tracked automatically?**

Yes, since @shipabase/js 0.4, including client-side route changes in the App Router.