Skip to content

Latest commit

 

History

History
85 lines (55 loc) · 3.88 KB

index.mdx

File metadata and controls

85 lines (55 loc) · 3.88 KB
title description sdk categories
Next.js
Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, and view them in Sentry.
sentry.javascript.nextjs
javascript
browser
server
server-node

Step 1: Install

To install Sentry using the installation wizard, run the following command within your project:

npx @sentry/wizard@latest -i nextjs

The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.

This guide assumes that you enable all features and allow the wizard to create an example page and route. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.

  • Creates config files with the default Sentry.init() calls for all runtimes (Node.js, Browser, and Edge)
  • Adds a Next.js instrumentation hook to your project (instrumentation.ts)
  • Creates or updates your Next.js config with the default Sentry settings
  • Creates error handling components (global-error.(jsx|tsx) and _error.jsx for the Pages Router) if they don't already exist
  • Creates .sentryclirc with an auth token to upload source maps (this file is automatically added to .gitignore)
  • Adds an example page and route to your application to help verify your Sentry setup

Step 2: Verify Your Setup

If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard:

  1. Open the example page /sentry-example-page in your browser. For most Next.js applications, this will be at localhost.
  2. Click the "Throw error" button. This triggers two errors:
  • a frontend error
  • an error within the API route

Sentry captures both of these errors for you. Additionally, the button click starts a performance trace to measure the time it takes for the API request to complete.

Don't forget to explore the example files' code in your project to understand what's happening after your button click.

View Captured Data in Sentry

Now, head over to your project on Sentry.io to view the collected data (it takes a couple of moments for the data to appear).

Next Steps

At this point, you should have integrated Sentry into your Next.js application and should already be sending error and performance data to your Sentry project.

Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are: