Sentry in Next.js

When developing any modern web application - monitoring and error tracking are essential to ensure a smooth user experience. One of the best tools for this purpose is Sentry.io - Which allows developers to track and resolve errors in real time. If you integrate Sentry into your app can save you a lot of time and effort in debugging and fixing issues.

In this article, we’ll walk through automatic configure Sentry into a Next.js project.

Why Sentry ?

• To capture automatically uncaught client-side and server-side exceptions
• To monitor errors across into client or server components, API routes, middleware, and edge functions
• To understand error context through user actions, navigation, and network breakdowns
• To intelligently group similar errors and reduce noise
• To track errors by release and quickly identify regressions after deployment
• To gain visibility into real-world performance issues in production
• To debug UI issues (hard-to-reproduce) using session replay

Hold on! Before jump into the installation process, make sure that you have created sentry account.

Installation

Sentry provides an official setup wizard that automatically configures everything needed for a Next.js project. This is the recommended way to integrate Sentry, as it reduces manual errors and ensures best-practice defaults.

Run the following command from your project root:

npx @sentry/wizard@latest -i nextjs

After running this command, the wizard will ask you several things to setting up.

• Are you using Sentry SaaS or self-hosted Sentry?
  - Sentry SaaS (sentry.io)
  - Self-hosted/on-premise/single-tenant
• Do you already have a Sentry account?
  - Yes
  - No

It will authenticate you with Sentry (via browser login)

• Do you want to route Sentry requests in the browser through your Next.js server to avoid ad blockers?
  - Yes (Can increase your server load and hosting bill)
  - No
• Do you want to enable Tracing to track the performance of your application?
  - Yes (recommended)
  - No
• Do you want to enable Session Replay to get a video-like reproduction of errors during a user session?
  - Yes (recommended, but increases bundle size)
  - No
• Do you want to enable Logs to send your application logs to Sentry?
  - Yes (recommended)
  - No

• Did you apply the snippet above?
  - Yes, continue!
• Do you want to create an example page (/sentry-example-page) to test your Sentry setup?
  - Yes (Recommended - Check your git status before committing!)
  - No

Once the setup finishes, you’ll notice several new or modified files in your project:

• sentry.client.config.ts
• sentry.server.config.ts
• sentry.edge.config.ts
• Updates to next.config.js
• Environment variables added to .env

Together, these ensure error tracking works consistently across:

• Client Components
• Server Components
• API Routes
• Middleware
• Edge Functions

Verifying the Setup

• Run your development server and visit: /sentry-example-page
• Trigger the error, then head over to your Sentry dashboard.
• If everything is configured correctly, you should see the error appear almost instantly.

Environment Variables Strategy (Dev vs Production)

When integrating Sentry, you might notice that the setup wizard initially configures only SENTRY_AUTH_TOKEN environment variable explicitly.

That’s intentional — this token is mainly used during build time for Uploading source maps.

However, as your application grows, relying on a single implicit configuration can quietly limit flexibility. So instead of scattering configuration across files, I chose to centralize all Sentry-related credentials inside .env files, separating development and production credentials cleanly.

SENTRY_ORGANIZATION= #Go to Organization settings and copy the organization slug
SENTRY_PROJECT= #Go to Project settings and copy the project slug
SENTRY_DSN= #Go to Project settings → Client Keys (DSN) and copy the DSN value
SENTRY_AUTH_TOKEN= #Go to User settings → Auth Tokens, create a new token, and copy it

Each of these serves a distinct purpose:

• SENTRY_ORGANIZATION - Identifies which Sentry organization owns the project.
• SENTRY_PROJECT - Specifies the exact project where errors and performance data should be sent.
• SENTRY_DSN -The public-facing connection string used by the client and server to send events.
• SENTRY_AUTH_TOKEN - A sensitive token used during build-time tasks.

Final Thoughts

Sentry isn’t just an error tracker — it’s a feedback loop between production and development. The earlier you integrate it, the more context you preserve, and the fewer blind spots you’ll have once real users start interacting with your app.

Next.js already gives you powerful abstractions.
Sentry helps you understand when — and why — those abstractions crack.

Happy monitoring...