Configuring Sentry for Next.js Apps

Lee Robinson

Lee Robinson / April 23, 2019

1 min read––– views

For many teams using Next.js, setting up exception monitoring is a critical requirement before going to production. This guide will show you how to use Sentry to catch & report errors on both client and server-side.

Brief Next.js Overview

Next.js gives you a hybrid approach for rendering your application. You can choose on a per-page basis whether you want client-side rendering, server-side rendering, or static-site generation.

Next.js uses file system based routing. All files inside the /pages directory will be routed based on their filename (e.g. /pages/home.js routes to your-domain.com/home).

There are a few Next-specific files you should understand:

  • _app.js is used to initialize pages and renders on both the client and the server.
  • _error.js is rendered by Next.js while handling exceptions.
  • next.config.js allows you to override the default configuration.

Implementing Sentry

Update (2021): This guide has been replaced with the official Sentry + Next.js example.

Subscribe to the newsletter

Get emails from me about web development, tech, and early access to new articles.

- subscribers – 32 issues