Cookieless analytics for Next.js in 2 minutes

Set it up in three steps#

1. 1

   Install

   npm i @shipabase/js

   NEXT_PUBLIC_SHIPABASE_KEY=SB-EU-xxxxxxxxxx

2. 2

   Call init once, on the client

   1"use client";2 3import { useEffect } from "react";4import { init } from "@shipabase/js";5 6export function Providers({ children }: { children: React.ReactNode }) {7  useEffect(() => {8    init(process.env.NEXT_PUBLIC_SHIPABASE_KEY!);9  }, []);10  return <>{children}</>;11}

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

3. 3

   Track what matters

   1import { trackEvent } from "@shipabase/js";2 3trackEvent("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.

For the Pages Router and the full reference, see the Next.js setup guide.

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 for the details.