Errors and not found

Fail gracefully

Databases time out and people mistype URLs. Instead of a blank screen, Next.js lets each route provide its own error screen (with a *Try again* button) and not found screen.

Special files

"use client";

export default function Error({ error, reset }) {
  return (
    <div role="alert">
      <h2>Something went wrong</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

error.jsx catches errors in its route segment and everything below — the layout above keeps working.
not-found.jsx renders when notFound() is called or no route matches.
In production, error messages from the server are hidden from users; log details on the server instead.

Fail gracefully

Special files

The rest of this lesson