This blog is based on a recent live workshop. You can watch the the full livestream on Youtube.

Next.js gives you a lot for free; server-side rendering, file-based routing, edge runtimes. What it doesn’t give you is a clear picture of what’s actually happening in production. The framework’s three-runtime architecture (client, server, edge) means errors can surface in one layer while originating in another, database queries hide behind ORM abstractions, and server actions swallow useful error messages before they ever reach the browser.

This post walks through a few specific observability gaps in Next.js apps, why they exist, and how to close them with Sentry.

TL;DR

Next.js production builds strip error details from server actions. The client sees “An error occurred in a server component render” with zero context. Sentry captures the original server-side exception with full stack traces.