---
title: "Next.js"
description: "Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, logs and traces and view them in Sentry."
url: https://docs.sentry.io/platforms/javascript/guides/nextjs/
---

# Next.js | Sentry for Next.js

## [Prerequisites](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#prerequisites)

You need:

* A Next.js application
* A Sentry [account](https://sentry.io/signup/) and [project](https://docs.sentry.io/product/projects.md)

## [Install](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#install)

Run the Sentry wizard to automatically configure Sentry in your Next.js application:

```bash
npx @sentry/wizard@latest -i nextjs
```

The wizard will prompt you to select features. Choose the ones you want to enable:

Error Monitoring\[x]Tracing\[ ]Session Replay\[x]Logs

Prefer to set things up yourself? Check out the [Manual Setup](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup.md) guide.

## [What the Wizard Created](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#what-the-wizard-created)

The wizard configured Sentry for all Next.js runtime environments and created files to test your setup.

### [SDK Initialization](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#sdk-initialization)

Next.js runs code in different environments. The wizard creates separate initialization files for each:

* **Client** (`instrumentation-client.ts`) — Runs in the browser
* **Server** (`sentry.server.config.ts`) — Runs in Node.js
* **Edge** (`sentry.edge.config.ts`) — Runs in edge runtimes

`instrumentation-client.ts`

```typescript
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "___PUBLIC_DSN___",

  // Adds request headers and IP for users
  sendDefaultPii: true,
  // ___PRODUCT_OPTION_START___ performance
  tracesSampleRate: process.env.NODE_ENV === "development" ? 1.0 : 0.1,
  // ___PRODUCT_OPTION_END___ performance
  // ___PRODUCT_OPTION_START___ session-replay
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  // ___PRODUCT_OPTION_END___ session-replay
  // ___PRODUCT_OPTION_START___ logs
  enableLogs: true,
  // ___PRODUCT_OPTION_END___ logs
  integrations: [
    // ___PRODUCT_OPTION_START___ session-replay
    Sentry.replayIntegration(),
    // ___PRODUCT_OPTION_END___ session-replay
  ],
});
```

##### Adjust sample rates for production

The example above samples 100% of traces in development and 10% in production. Monitor your [usage stats](https://sentry.io/orgredirect/organizations/:orgslug/settings/stats/?dataCategory=spans) and adjust `tracesSampleRate` based on your traffic volume. Learn more about [sampling configuration](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/sampling.md).

### [Server-Side Registration](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#server-side-registration)

The `instrumentation.ts` file registers your server and edge configurations with Next.js.

`instrumentation.ts`

```typescript
import * as Sentry from "@sentry/nextjs";

export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    await import("./sentry.server.config");
  }
  if (process.env.NEXT_RUNTIME === "edge") {
    await import("./sentry.edge.config");
  }
}

export const onRequestError = Sentry.captureRequestError;
```

### [Next.js Configuration](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#nextjs-configuration)

Your `next.config.ts` is wrapped with `withSentryConfig` to enable source map uploads, tunneling (to avoid ad-blockers), and other build-time features.

`next.config.ts`

```typescript
import { withSentryConfig } from "@sentry/nextjs";

export default withSentryConfig(nextConfig, {
  org: "___ORG_SLUG___",
  project: "___PROJECT_SLUG___",

  // Upload source maps for readable stack traces
  authToken: process.env.SENTRY_AUTH_TOKEN,

  // Route Sentry requests through your server (avoids ad-blockers)
  tunnelRoute: "/sentry-tunnel",

  silent: !process.env.CI,
});
```

### [Error Handling](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#error-handling)

The wizard creates `app/global-error.tsx` to capture React rendering errors in your App Router application.

`app/global-error.tsx`

```tsx
"use client";

import * as Sentry from "@sentry/nextjs";
import { useEffect } from "react";

export default function GlobalError({
  error,
}: {
  error: Error & { digest?: string };
}) {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);

  return (
    <html>
      <body>
        <h1>Something went wrong!</h1>
      </body>
    </html>
  );
}
```

### [Source Maps](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#source-maps)

The wizard creates `.env.sentry-build-plugin` with your auth token for source map uploads. This file is automatically added to `.gitignore`.

For CI/CD, set the `SENTRY_AUTH_TOKEN` environment variable in your build system.

`.env.sentry-build-plugin`

```bash
SENTRY_AUTH_TOKEN=sntrys_eyJ...
```

### [Example Page](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#example-page)

The wizard creates `/sentry-example-page` with a button that triggers a test error. Use this to verify your setup.

```bash
app/
├── sentry-example-page/
│   └── page.tsx       # Test page with error button
└── api/
    └── sentry-example-api/
        └── route.ts   # Test API route
```

## [Verify Your Setup](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#verify-your-setup)

##### Important

Errors triggered from within your browser's developer tools (like the browser console) are sandboxed, so they will not trigger Sentry's error monitoring.

The example page tests all your enabled features with a single action:

1. Start your dev server:

```bash
npm run dev
```

2. Visit [localhost:3000/sentry-example-page](http://localhost:3000/sentry-example-page)

3. Click **"Throw Sample Error"**

### [Check Your Data in Sentry](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#check-your-data-in-sentry)

**Errors** — [Open Issues](https://sentry.io/orgredirect/organizations/:orgslug/issues/)

You should see "This is a test error" with a full stack trace pointing to your source code.

**Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/)

You should see the page load trace and the button click span. Learn more about [custom spans](https://docs.sentry.io/platforms/javascript/guides/nextjs/tracing/instrumentation/custom-instrumentation.md).

**Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/)

Watch a video-like recording of your session, including the moment the error occurred. Learn more about [Session Replay configuration](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay.md).

**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) NEW

See structured log entries from your application. You can send logs from anywhere:

```typescript
Sentry.logger.info("User action", { userId: "123" });
Sentry.logger.warn("Slow response", { duration: 5000 });
Sentry.logger.error("Operation failed", { reason: "timeout" });
```

Learn more about [Logs configuration](https://docs.sentry.io/platforms/javascript/guides/nextjs/logs.md).

Are you having problems setting up the SDK?

* If you encountered issues with our installation wizard, try [setting up Sentry manually](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup.md)
* Check [Troubleshooting](https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting.md) for common issues
* [Get support](https://sentry.io/support/)

## [Next Steps](https://docs.sentry.io/platforms/javascript/guides/nextjs.md#next-steps)

You've successfully integrated Sentry into your Next.js application! Here's what to explore next:

* Explore [practical guides](https://docs.sentry.io/guides.md) on what to monitor, log, track, and investigate after setup
* [Logs Integrations](https://docs.sentry.io/platforms/javascript/guides/nextjs/logs.md#integrations) - Connect popular logging libraries like Pino, Winston, and Bunyan
* [Distributed Tracing](https://docs.sentry.io/platforms/javascript/guides/nextjs/tracing/distributed-tracing.md) - Trace requests across services and microservices
* [AI Agent Monitoring](https://docs.sentry.io/platforms/javascript/guides/nextjs/ai-agent-monitoring.md) - Monitor AI agents built with Vercel AI SDK, LangChain, and more
* [Connect GitHub + Seer](https://docs.sentry.io/organization/integrations/source-code-mgmt/github.md#installing-github) - Enable AI-powered [root cause analysis](https://docs.sentry.io/product/ai-in-sentry/seer.md) by connecting your GitHub repository
* [Configuration Options](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration.md) - Explore extended SDK configuration options

## Other JavaScript Frameworks

- [Angular](https://docs.sentry.io/platforms/javascript/guides/angular.md)
- [Astro](https://docs.sentry.io/platforms/javascript/guides/astro.md)
- [AWS Lambda](https://docs.sentry.io/platforms/javascript/guides/aws-lambda.md)
- [Azure Functions](https://docs.sentry.io/platforms/javascript/guides/azure-functions.md)
- [Bun](https://docs.sentry.io/platforms/javascript/guides/bun.md)
- [Capacitor](https://docs.sentry.io/platforms/javascript/guides/capacitor.md)
- [Cloud Functions for Firebase](https://docs.sentry.io/platforms/javascript/guides/firebase.md)
- [Cloudflare](https://docs.sentry.io/platforms/javascript/guides/cloudflare.md)
- [Connect](https://docs.sentry.io/platforms/javascript/guides/connect.md)
- [Cordova](https://docs.sentry.io/platforms/javascript/guides/cordova.md)
- [Deno](https://docs.sentry.io/platforms/javascript/guides/deno.md)
- [Effect](https://docs.sentry.io/platforms/javascript/guides/effect.md)
- [Electron](https://docs.sentry.io/platforms/javascript/guides/electron.md)
- [Elysia](https://docs.sentry.io/platforms/javascript/guides/elysia.md)
- [Ember](https://docs.sentry.io/platforms/javascript/guides/ember.md)
- [Express](https://docs.sentry.io/platforms/javascript/guides/express.md)
- [Fastify](https://docs.sentry.io/platforms/javascript/guides/fastify.md)
- [Gatsby](https://docs.sentry.io/platforms/javascript/guides/gatsby.md)
- [Google Cloud Functions](https://docs.sentry.io/platforms/javascript/guides/gcp-functions.md)
- [Hapi](https://docs.sentry.io/platforms/javascript/guides/hapi.md)
- [Hono](https://docs.sentry.io/platforms/javascript/guides/hono.md)
- [Koa](https://docs.sentry.io/platforms/javascript/guides/koa.md)
- [Nest.js](https://docs.sentry.io/platforms/javascript/guides/nestjs.md)
- [Node.js](https://docs.sentry.io/platforms/javascript/guides/node.md)
- [Nuxt](https://docs.sentry.io/platforms/javascript/guides/nuxt.md)
- [React](https://docs.sentry.io/platforms/javascript/guides/react.md)
- [React Router Framework](https://docs.sentry.io/platforms/javascript/guides/react-router.md)
- [Remix](https://docs.sentry.io/platforms/javascript/guides/remix.md)
- [Solid](https://docs.sentry.io/platforms/javascript/guides/solid.md)
- [SolidStart](https://docs.sentry.io/platforms/javascript/guides/solidstart.md)
- [Svelte](https://docs.sentry.io/platforms/javascript/guides/svelte.md)
- [SvelteKit](https://docs.sentry.io/platforms/javascript/guides/sveltekit.md)
- [TanStack Start React](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react.md)
- [Vue](https://docs.sentry.io/platforms/javascript/guides/vue.md)
- [Wasm](https://docs.sentry.io/platforms/javascript/guides/wasm.md)

## Topics

- [Manual Setup](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup.md)
- [Capturing Errors](https://docs.sentry.io/platforms/javascript/guides/nextjs/capturing-errors.md)
- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps.md)
- [Logs](https://docs.sentry.io/platforms/javascript/guides/nextjs/logs.md)
- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay.md)
- [Tracing](https://docs.sentry.io/platforms/javascript/guides/nextjs/tracing.md)
- [AI Agent Monitoring](https://docs.sentry.io/platforms/javascript/guides/nextjs/ai-agent-monitoring.md)
- [Metrics](https://docs.sentry.io/platforms/javascript/guides/nextjs/metrics.md)
- [Profiling](https://docs.sentry.io/platforms/javascript/guides/nextjs/profiling.md)
- [Crons](https://docs.sentry.io/platforms/javascript/guides/nextjs/crons.md)
- [User Feedback](https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback.md)
- [Sampling](https://docs.sentry.io/platforms/javascript/guides/nextjs/sampling.md)
- [Enriching Events](https://docs.sentry.io/platforms/javascript/guides/nextjs/enriching-events.md)
- [Extended Configuration](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration.md)
- [OpenTelemetry Support](https://docs.sentry.io/platforms/javascript/guides/nextjs/opentelemetry.md)
- [Feature Flags](https://docs.sentry.io/platforms/javascript/guides/nextjs/feature-flags.md)
- [Data Management](https://docs.sentry.io/platforms/javascript/guides/nextjs/data-management.md)
- [Security Policy Reporting](https://docs.sentry.io/platforms/javascript/guides/nextjs/security-policy-reporting.md)
- [Special Use Cases](https://docs.sentry.io/platforms/javascript/guides/nextjs/best-practices.md)
- [Migration Guide](https://docs.sentry.io/platforms/javascript/guides/nextjs/migration.md)
- [Troubleshooting](https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting.md)