Upload source maps for Next.js

Add the following to your next.config.js file:

import { withPostHogConfig } from "@posthog/nextjs-config";

const nextConfig = {
  //...your nextjs config,
};

export default withPostHogConfig(nextConfig, {
  personalApiKey: process.env.POSTHOG_API_KEY, // Personal API Key
  envId: process.env.POSTHOG_ENV_ID, // Environment ID
  host: process.env.NEXT_PUBLIC_POSTHOG_HOST, // (optional), defaults to https://us.posthog.com
  sourcemaps: { // (optional)
      enabled: true, // (optional) Enable sourcemaps generation and upload, default to true on production builds
      project: "my-application", // (optional) Project name, defaults to repository name
      version: "1.0.0", // (optional) Release version, defaults to current git commit
      deleteAfterUpload: true, // (optional) Delete sourcemaps after upload, defaults to true
  },
});

Where you should set the following environment variables:

If you are using Vercel (or any other hosting service), make sure these environment variables are added to your project settings, not just your local setup. This enables source maps to be automatically uploaded on your production build.

Before proceeding, confirm that source maps are being generated by checking for .js.map files in your dist directory. These are the symbol sets that will be used to unminify stack traces in PostHog.

Make sure you serve the injected files in production by running the same build and inject process in CI during deployment. PostHog will need access to these injected chunkId comments when building the stack traces.

1. Confirm that source maps are successfully uploaded to PostHog.

2. Confirm that the served files are injected with the correct source map comment in production in dev tools:

//# chunkId=0197e6db-9a73-7b91-9e80-4e1b7158db5c