Error Boundaries in Next.js App Router — Handling Failures Gracefully Next.js App Router introduces a new error boundary model using `error.js` files that can be nested at any route level, allowing errors to be contained locally rather than propagated globally. A developer explains how to implement graceful error handling with client components, the `reset` function for retryable errors, and the `global-error.js` file for catching errors in the root layout. Most Next.js applications handle the happy path well. A request comes in, data loads, components render, user sees the page. Error handling is where applications often reveal their real quality — and where App Router introduces some nuances worth understanding. Here's how error boundaries work in App Router, what the error.js file actually does, and the patterns that make failure handling feel intentional rather than afterthought. This is the approach I use in production for a free AI image generator for beginners https://pixova.io/blog/what-is-text-to-image-ai where graceful degradation matters more than on sites with simpler data flows. Pages Router had error.js and getInitialProps for error handling. App Router introduces a different model built on React's Error Boundary concept, with error.js files that can be nested at any level of the route hierarchy. The key mental model shift: errors are contained at the nearest error.js boundary, not propagated to a global handler. This means you can have different error UIs for different sections of your app. error.js File Place an error.js file in any route segment to catch errors in that segment and its children: app/ ├── layout.js Root layout ├── error.js Catches errors in root segment ├── page.js ├── dashboard/ │ ├── error.js Catches errors in dashboard only │ ├── layout.js │ └── page.js └── blog/ ├── error.js Catches errors in blog only └── slug / └── page.js // app/error.js 'use client'; // Error components must be Client Components import { useEffect } from 'react'; export default function Error { error, reset } { useEffect = { // Log to error reporting service console.error error ; }, error ; return