Stop Using react-error-boundary in Next.js? Meet next/error

For a long time, whenever I needed an Error Boundary in React, I reached for react-error-boundary.

It has been the go-to solution because React itself only provides the low-level Error Boundary API.

But if you're using Next.js App Router, there's now a much cleaner option.

Starting with Next.js 16, you can use the built-in next/error package.

Let's see why it matters.

---

The Old Way

Most React applications use react-error-boundary.

import { ErrorBoundary } from "react-error-boundary";

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={resetErrorBoundary}>
        Try Again
      </button>
    </div>
  );
}

export default function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Dashboard />
    </ErrorBoundary>
  );
}

It works well, but it means:

• Installing another dependency
• Learning another API
• Slightly different patterns from what Next.js already provides

If you're already using Next.js, that's no longer necessary in many cases.

---

Enter next/error

Next.js now ships with a helper called catchError.

Instead of wrapping your component with <ErrorBoundary />, you simply wrap your fallback component.

'use client';

import { catchError, type ErrorInfo } from 'next/error';

function ErrorFallback(props, { retry }: ErrorInfo) {
  return (
    <div>
      <p>Something went wrong.</p>

      <button onClick={() => retry()}>
        Try Again
      </button>
    </div>
  );
}

export default catchError(ErrorFallback);

That's it.

No extra package.

No separate Error Boundary component.

---

A Real Example

Here's an example with a nicer UI.

'use client';

import { AlertTriangle } from 'lucide-react';
import { catchError, type ErrorInfo } from 'next/error';
import { Button } from '@/components/ui/button';

function ErrorFallback(
  props: { title?: string; compact?: boolean },
  { retry }: ErrorInfo
) {
  if (props.compact) {
    return (
      <div className="flex flex-col items-center gap-2 px-4 py-4 text-center">
        <AlertTriangle className="text-danger h-4 w-4" />
        <p className="text-gray text-xs">
          {props.title ?? 'Something went wrong'}
        </p>

        <Button
          size="sm"
          variant="secondary"
          onClick={() => retry()}
        >
          Try again
        </Button>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
      <AlertTriangle className="text-danger h-6 w-6" />

      <p className="text-sm font-medium">
        {props.title ?? 'Something went wrong'}
      </p>

      <Button
        size="sm"
        variant="secondary"
        onClick={() => retry()}
      >
        Try again
      </Button>
    </div>
  );
}

export default catchError(ErrorFallback);

Notice that your fallback component receives two things:

• props → Any custom props you pass.
• ErrorInfo → Helpful methods like retry().

Calling retry() tells Next.js to attempt rendering the component again.

---

Why This Feels Better

The API is surprisingly simple.

Instead of this:

<ErrorBoundary FallbackComponent={ErrorFallback}>
  <Dashboard />
</ErrorBoundary>

You create an error boundary by exporting:

export default catchError(ErrorFallback);

Your fallback stays focused on displaying the UI.

Next.js handles the rest.

---

When Should You Use It?

If you're building a Next.js App Router application and only need client-side Error Boundaries, next/error is a great default.

It gives you:

• ✅ No additional dependency
• ✅ Smaller bundle
• ✅ Built into Next.js
• ✅ Retry support out of the box
• ✅ API that feels consistent with the framework

---

Should You Remove react-error-boundary?

If you're starting a new Next.js project, I'd probably reach for next/error first.

If you already have react-error-boundary everywhere, there's no urgent reason to rewrite everything overnight.

But for new components, using the built-in solution keeps your dependency list a little smaller and your code a little more aligned with Next.js.

---

Final Thoughts

One thing I like about recent Next.js releases is that they're gradually replacing common third-party utilities with built-in APIs.

next/error is another example of that.

It's a small addition, but it removes a dependency, simplifies your code, and gives you an Error Boundary API that feels like it belongs in the framework.

If you're using the App Router, it's definitely worth trying.

---

Resources

• Next.js catchError documentation: https://nextjs.org/docs/app/api-reference/functions/catchError
• Next.js 16 release notes: https://nextjs.org/blog