Next.js Toolkit

Next.js projects use the same SDKs as any other React app. Use the React SDK in client components and reach for the Web SDK in server actions or API routes when you need secure tokens.

Install

npm install @streakdev/react @streakdev/web

Client Components

Wrap your UI in StreakProvider inside a client boundary:

'use client';

import { StreakProvider, StreakCounter } from '@streakdev/react';

export function StreakWidgetPanel({ userId }: { userId?: string }) {
  return (
    <StreakProvider projectId={process.env.NEXT_PUBLIC_STREAK_PROJECT_ID!} userId={userId}>
      <StreakCounter size="md" />
    </StreakProvider>
  );
}

Server Actions / API Routes

Use the Web SDK on the server for aliasing or server-triggered events:

import { createClient } from '@streakdev/web';

const client = createClient({
  adminToken: process.env.STREAK_ADMIN_TOKEN,
});

export async function aliasUser({ anonymousId, userHash }: {
  anonymousId: string;
  userHash: string;
}) {
  await client.aliasUser({
    projectId: process.env.NEXT_PUBLIC_STREAK_PROJECT_ID!,
    anonymousId,
    userHash,
  });
}

Notes

Only call aliasUser from the server (it requires X-Admin-Token).
If you want to alias from the browser, generate a short-lived alias token on the server and call /v1/alias from the client.
For fully custom UI, use the React components; for the hosted widget UI, use <StreakWidget />.

Next.js Toolkit

Install

Client Components

Server Actions / API Routes

Notes

On this page