Set up Mixpanel on a Next.js application

Start by installing the SDK.
Set up environment variables for your Mixpanel token

a. Create a .env.local file in the root of your Next.js project (note: for production use .env.production).

b. Then, add your Mixpanel [project token] (https://docs.mixpanel.com/docs/orgs-and-projects/managing-projects#find-your-project-tokens).
```
// Paste in your token
NEXT_PUBLIC_MIXPANEL_TOKEN=YOUR_PROJECT_TOKEN
```

Create a utility file to initialize the Mixpanel SDK in your Next.js application

a. Create a file (e.g., mixpanelClient.js) under the lib/ folder of your Next.js project

b. Add the following code to the file:

import mixpanel from 'mixpanel-browser';
 
const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;
 
export const initMixpanel = () => {
  if (!MIXPANEL_TOKEN) {
    console.warn('Mixpanel token is missing! Check your .env file.');
    return;
  }
 
  mixpanel.init(MIXPANEL_TOKEN, { autocapture: true });
}

Initialize Mixpanel in your Next.js application

a. If using page router, open or create the file _app.js or app.tsx in your pages/ directory. Then import and initialize Mixpanel inside useEffect. You’ll also need to track pageviews manually using useRouter.

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { initMixpanel, trackPageView } from '../lib/mixpanelClient';
 
function MyApp({ Component, pageProps }) {
  const router = useRouter();
 
  useEffect(() => {
    initMixpanel(); // Initialize Mixpanel
 
    const handleRouteChange = (url) => {
      trackPageView(url); // Track pageviews
    };
 
    // Track page views on route change
    router.events.on('routeChangeComplete', handleRouteChange);
 
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);
 
  return <Component {...pageProps} />;
}
 
export default MyApp;

b. If using app router, open or create the file layout.js or layout.tsx in your app/ directory

'use client';
 
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { initMixpanel } from '../lib/mixpanelClient';
 
export default function RootLayout({ children }) {
 
  useEffect(() => {
    initMixpanel(); // Initialize Mixpanel
  }, []);
 
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Run the development server, test your application (click some things, submit some things, etc.) and check the Mixpanel live event view to confirm that events are sending via Autocapture.

Install Mixpanel Identify Users

Was this page useful?