Next.js analytics setup (App Router), cookieless
Add Shipabase to a Next.js App Router project.
Install#
npm i @shipabase/jsNEXT_PUBLIC_SHIPABASE_KEY=SB-EU-xxxxxxxxxxCreate a providers component#
"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!, { appVersion: "1.0.0" }); }, []); return <>{children}</>;}Wrap your layout#
import { Providers } from "./providers"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> <Providers>{children}</Providers> </body> </html> );}Track events#
"use client";import { trackEvent } from "@shipabase/js"; <button onClick={() => trackEvent("checkout_started", { plan: "pro" })}>Buy</button>;Importing @shipabase/js in server code won’t crash, but call init and trackEvent from the browser (in useEffect or event handlers). For server-side events, use @shipabase/js/node.
Pages Router: call init in a useEffect in pages/_app.tsx.
Related guides
DocsCheck if analytics is workingSee your first event, and fix it when nothing shows up.DocsAutomatic page view tracking for SPAs and mobile screensPages are tracked automatically in the browser. Screens in mobile apps take one line.DocsHow to name analytics eventsShort, stable names make every chart readable.DocsNode.js analytics for API servers, CLIs, scripts and cronsTrack events from API servers, CLIs, scripts and cron jobs.BlogCookieless analytics for Next.js in 2 minutesAdd privacy-first product analytics to a Next.js App Router project: install, init once, track what matters.