Next.js

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.
// 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, first create a client component in a file (e.g. components/MixpanelProvider.js) to handle the client-side initialization.

'use client';

import { useEffect } from 'react';
import { initMixpanel } from '../lib/mixpanelClient';

export default function MixpanelProvider({ children }) {

  useEffect(() => {
    initMixpanel(); // Initialize Mixpanel
  }, []);

  return <>{children}</>;
}

Next, open or create the file layout.js or layout.tsx in your app/ directory and wrap the body component with the MixpanelProvider.

import { MixpanelProvider } from '../components/MixpanelProvider';

export default function RootLayout({ children }) {

  return (
    <html lang="en">
      <body>
      <MixpanelProvider>{children}</MixpanelProvider>
      </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.

INTRO

DATA IN

ANALYSIS

MIXPANEL AI

ADMIN

DATA OUT

SUPPORT