# Upload source maps for Next.js - Docs

1.  1

    ## Install the PostHog Next.js config package

    Required

    Terminal

    PostHog AI

    ```shell
    npm install @posthog/nextjs-config
    ```

2.  2

    ## Add PostHog config to your Next.js app

    Required

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

    next.config.js

    PostHog AI

    ```javascript
    import { withPostHogConfig } from "@posthog/nextjs-config";
    const nextConfig = {
      //...your nextjs config,
    };
    export default withPostHogConfig(nextConfig, {
      personalApiKey: process.env.POSTHOG_API_KEY, // Personal API Key
      projectId: process.env.POSTHOG_PROJECT_ID, // Project 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
          releaseName: "my-application", // (optional) Release name, defaults to repository name
          releaseVersion: "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:

    | Environment Variable | Description |
    | --- | --- |
    | POSTHOG_API_KEY | [Personal API key](https://app.posthog.com/settings/user-api-keys#variables) with at least write access on error tracking |
    | POSTHOG_PROJECT_ID | Project ID you can find in your [project settings](https://app.posthog.com/settings/project#variables) |
    | NEXT_PUBLIC_POSTHOG_HOST | Your PostHog instance URL. Defaults to https://us.posthog.com |

    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.

3.  ## Verify source map generation

    Checkpoint

    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.

4.  3

    ## Inject and upload source maps

    Required

    The Next.js config package automatically handles source map injection and upload during the build process. No additional configuration is needed.

    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.

5.  ## Verify source map upload and injection

    Checkpoint

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

    [Check symbol sets in PostHog](https://app.posthog.com/settings/project-error-tracking#error-tracking-symbol-sets)

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

    JavaScript

    PostHog AI

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

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better