Configuring Sentry for Next.js Apps

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.