shipabase/docs
Docs/Frameworks
.md

Next.js

Add Shipabase to a Next.js App Router project.

Install#

Terminal
npm i @shipabase/js
.env.local
NEXT_PUBLIC_SHIPABASE_KEY=SB-EU-xxxxxxxxxx

Create a providers component#

app/providers.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!, { appVersion: "1.0.0" });  }, []);  return <>{children}</>;}

Wrap your layout#

app/layout.tsx
import { Providers } from "./providers"; export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <Providers>{children}</Providers>      </body>    </html>  );}

Track events#

any client component
"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.