How to Integrate Mixpanel with V0

Open V0 at v0.dev and describe two separate interfaces: first, the user-facing app pages where you want to track events (any interactive feature — a pricing page, dashboard, onboarding flow), and second, a separate internal analytics dashboard for viewing the Mixpanel data. For the tracking pages, tell V0 specifically what interactions to track — button clicks, form submissions, tab switches — and V0 will generate components with onClick handlers that you'll wire to Mixpanel. For the analytics dashboard, describe the chart types and metrics you need: funnel visualizations, event count tables, time series charts, user lists. V0 uses Recharts by default for data visualization, which works well for Mixpanel analytics dashboards. Be specific about your data model — if you're tracking a signup funnel with 4 steps, tell V0 the step names and it will generate an appropriate funnel component. After generating both interfaces, push the code to GitHub using V0's Git panel. In subsequent steps you'll wire the tracking hooks into the user-facing components and build the API routes that power the dashboard with real Mixpanel data.

Install the Mixpanel JavaScript SDK with npm install mixpanel-browser and create a tracking utility module. In Next.js App Router, the Mixpanel SDK must only run in the browser — initialize it inside a useEffect or in a module that checks typeof window !== 'undefined'. Create a client-side tracking utility at lib/mixpanel.ts that exports an initialized Mixpanel instance and helper functions. The NEXT_PUBLIC_MIXPANEL_TOKEN environment variable is safe to expose client-side because it's a public identifier, not a secret — Mixpanel's security model relies on server-side secrets for reading data and a project token for writing events. Add event tracking to your V0-generated components by importing the tracking utility and calling track() in click handlers, form submission callbacks, and useEffect hooks for page views. For user identification (connecting events to specific users after login), call mixpanel.identify(userId) with your app's user ID, then mixpanel.people.set({ email, name, plan }) to create or update the user's Mixpanel profile. This links all events from that session to the user's profile for cohort analysis.

1// lib/mixpanel.ts (client-only tracking utility)
2import mixpanel from 'mixpanel-browser';
3
4const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;
5
6let initialized = false;
7
8export function initMixpanel() {
9  if (initialized || typeof window === 'undefined' || !MIXPANEL_TOKEN) return;
10
11  mixpanel.init(MIXPANEL_TOKEN, {
12    debug: process.env.NODE_ENV === 'development',
13    track_pageview: true,
14    persistence: 'localStorage',
15  });
16
17  initialized = true;
18}
19
20export function track(event: string, properties?: Record<string, unknown>) {
21  if (typeof window === 'undefined') return;
22  initMixpanel();
23  mixpanel.track(event, properties);
24}
25
26export function identify(userId: string) {
27  if (typeof window === 'undefined') return;
28  initMixpanel();
29  mixpanel.identify(userId);
30}
31
32export function setUserProfile(properties: Record<string, unknown>) {
33  if (typeof window === 'undefined') return;
34  mixpanel.people.set(properties);
35}
36
37export function reset() {
38  if (typeof window === 'undefined') return;
39  mixpanel.reset(); // Call on logout
40}

Create a Next.js API route that queries Mixpanel's Data Export and Query APIs using your service account credentials. Mixpanel's Query API base URL is https://mixpanel.com/api/2.0/ and authentication uses Basic auth with your service account username and secret as the credentials. The most useful endpoints for dashboards are: /events (aggregate event counts by name and time), /segmentation (break down events by property), /funnels (conversion rates through a defined funnel), and /retention (cohort retention analysis). Service account credentials are secret and must never reach the browser — they give read access to all your Mixpanel data. The Mixpanel API requires project_id as a query parameter on all requests and returns data in a format specific to each endpoint. The /events endpoint returns counts by event name and date. The /segmentation endpoint returns event counts broken down by any event or profile property. For the overview dashboard, query total event counts for your key metrics and user counts from the /engage endpoint. Build helper functions for each query type and compose them in your route handler based on query parameters from the frontend.

1// app/api/mixpanel/overview/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const MIXPANEL_PROJECT_ID = process.env.MIXPANEL_PROJECT_ID;
5const MIXPANEL_SERVICE_ACCOUNT = process.env.MIXPANEL_SERVICE_ACCOUNT_USERNAME;
6const MIXPANEL_SERVICE_SECRET = process.env.MIXPANEL_SERVICE_ACCOUNT_SECRET;
7
8const MIXPANEL_API_BASE = 'https://mixpanel.com/api/2.0';
9
10function getAuthHeader(): string {
11  const credentials = `${MIXPANEL_SERVICE_ACCOUNT}:${MIXPANEL_SERVICE_SECRET}`;
12  return `Basic ${Buffer.from(credentials).toString('base64')}`;
13}
14
15async function queryMixpanel(endpoint: string, params: Record<string, string>) {
16  const queryString = new URLSearchParams({
17    project_id: MIXPANEL_PROJECT_ID!,
18    ...params,
19  }).toString();
20
21  const response = await fetch(`${MIXPANEL_API_BASE}/${endpoint}?${queryString}`, {
22    headers: {
23      Authorization: getAuthHeader(),
24      Accept: 'application/json',
25    },
26  });
27
28  if (!response.ok) {
29    throw new Error(`Mixpanel API error: ${response.status}`);
30  }
31
32  return response.json();
33}
34
35export async function GET(request: NextRequest) {
36  if (!MIXPANEL_PROJECT_ID || !MIXPANEL_SERVICE_ACCOUNT || !MIXPANEL_SERVICE_SECRET) {
37    return NextResponse.json({ error: 'Mixpanel not configured' }, { status: 500 });
38  }
39
40  const today = new Date();
41  const thirtyDaysAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
42  const fromDate = thirtyDaysAgo.toISOString().split('T')[0];
43  const toDate = today.toISOString().split('T')[0];
44
45  try {
46    // Fetch top events by count
47    const eventsData = await queryMixpanel('events/top', {
48      from_date: fromDate,
49      to_date: toDate,
50      limit: '10',
51    });
52
53    return NextResponse.json({
54      topEvents: eventsData.events || [],
55      dateRange: { from: fromDate, to: toDate },
56    });
57  } catch (error) {
58    const message = error instanceof Error ? error.message : 'Unknown error';
59    console.error('Mixpanel overview fetch failed:', message);
60    return NextResponse.json({ error: message }, { status: 500 });
61  }
62}

Push your project to GitHub and add Mixpanel credentials to Vercel. Open the Vercel Dashboard → select your project → Settings → Environment Variables. Add four variables: NEXT_PUBLIC_MIXPANEL_TOKEN with your project token (this is the only Mixpanel variable that gets the NEXT_PUBLIC_ prefix — it needs to be accessible in the browser for the client SDK), MIXPANEL_PROJECT_ID with your numeric project ID, MIXPANEL_SERVICE_ACCOUNT_USERNAME with the service account username (format: username.123456.mp-service-account), and MIXPANEL_SERVICE_ACCOUNT_SECRET with the service account secret. The service account credentials are server-only secrets — never add NEXT_PUBLIC_ to them. Set all variables for Production, Preview, and Development environments. After saving and deploying, open your live Vercel URL and interact with the app — then check Mixpanel's Live View to confirm events are arriving. Open the analytics dashboard route and verify it returns real data from your Mixpanel project. If events appear in Live View but the dashboard shows errors, check the Vercel function logs (Vercel Dashboard → your deployment → Functions) for the specific Mixpanel API error.