Next.js - Mixpanel

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.