> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mixpanel.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
export const dataItems = {
'javascript': `Javascript`,
'python': `Python`,
'php': `PHP`,
'node': `Node`,
'go': `Go`,
'ruby': `Ruby`,
'java': `Java`,
'reactnative': `React Native`,
'flutter': `Flutter`,
'ios': `iOS (Objective-C)`,
'swift': `iOS (Swift)`,
'android': `Android`,
'unity': `Unity`,
'httpapi': `HTTP API`
};
1. Start by [installing the SDK](/docs/quickstart/install-mixpanel).
2. 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](/docs/orgs-and-projects/managing-projects#find-your-project-tokens).
```javascript theme={"system"}
// Paste in your token
NEXT_PUBLIC_MIXPANEL_TOKEN=YOUR_PROJECT_TOKEN
```
3. 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:
```javascript theme={"system"}
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 });
}
```
4. 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`.
```javascript theme={"system"}
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 ;
}
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.
```javascript theme={"system"}
'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.
```javascript theme={"system"}
import { MixpanelProvider } from '../components/MixpanelProvider';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
5. 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.