Why we shipped a Next.js SDK, and how you can use it
Tags: monitoring, nextjs, devops, performance
Published: 2021-06-10 23:07:25

As you could probably tell from the title, we shipped an [SDK for Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs/). This means you can capture errors, measure performance, manage releases, configure suspect commits, and automatically upload sourcemaps to view unminified JavaScript and TypeScript with zero(-ish) configuration.

Why was Next.js next on our list? Well, it’s one of the fastest-growing [React](https://docs.sentry.io/platforms/javascript/guides/react/) frameworks and developers love it. Next.js provides a developer experience that helps with building features rapidly, seeing local changes quickly, and reducing build times.

_"Next.js turns traditionally complex decisions into simple implementation details. Spinning up new pages with our existing React components and Material UI went from days to hours with Next."_ 

– _Sean Parmelee, Applications Architect, Care.com_

To monitor Next.js projects in the past, you had to install our `@sentry/node` and `@sentry/react` SDKs — installing both and configuring your environment correctly was time-consuming and literally no fun. The new Next.js SDK does all that for you, and works swimmingly with our [Webpack Plugin](https://www.npmjs.com/package/@sentry/webpack-plugin) or [`sentry-cli`](https://docs.sentry.io/product/cli/) to upload your source maps.

To get started with Sentry for Next.js, simply install the SDK:

`yarn add @sentry/nextjs`

And then configure:

`npx @sentry/wizard -i nextjs`

Configure [performance monitoring](https://docs.sentry.io/platforms/javascript/guides/nextjs/performance/) by setting a `tracesSampleRate` when you initialize the SDK, in both `sentry.client.config.js` & `sentry.server.config.js`:

```javascript
Sentry.init({
  // ...
  tracesSampleRate: 1.0
});
```

Once you’ve done that, frontend transactions will be captured automatically. To capture API request transactions, wrap your handlers in our `withSentry` helper. (Hint: If you’re already using our SDK to capture errors in those routes, you will have already done this. No extra configuration needed.)

```javascript
import { * as Sentry } from ‘@sentry/nextjs’;
Sentry.init({ ... });

function handler(req, res) {
  // ...
}

export default Sentry.withSentry(handler);
```

You can quickly track down poor-performing APIs or slow database queries. With new features like Quick Trace, [Trace View](https://docs.sentry.io/product/sentry-basics/tracing/trace-view/), and Suspect Tags, Sentry connects frontend issues to root causes in the backend and vice versa.

![frontend to backend root causes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzfsry36iupbld0zq32p.png)

Trace View gives a waterfall view of a given transaction and dependencies across all projects on a single screen:

![trace view of transactions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fozvaqzcaty2v32ffjd.jpeg)

Early adopters of our SDK — like Stefen Alper, Co-Founder of eesel, a content search and centralization tool — are already using Sentry for Next.js to capture errors. Now they (and you) can also capture performance data.

_"We moved to Next.js for the dev experience and the scalability. As longtime users of Sentry’s error monitoring offering, we’re looking forward to start monitoring performance and managing releases with Sentry’s new Next.js SDK."_

–_Stefen Alper, Co-Founder, eesel.app_

Install our [Next.js SDK](https://sentry.io/for/nextjs) and get a pretty good idea of which commit caused the issue and who is likely responsible, and automatically upload source maps so your stack trace looks like the original code you wrote. Also, [join us](https://us06web.zoom.us/webinar/register/4016233661429/WN_znhaqwALTXWf-3Rqtf8mBQ) on June 24th, 2021 for a live workshop on how to build, deploy, and monitor Next.js applications with Sentry and Netlify.