All 5 Error Handling & Not Found Pages questions
More in Error Handling & Not Found Pages
How do you create a custom 404 not found page in Next.js? How would you manually trigger a not found response when a specific piece of data, like a product, does not exist? How does the global-error.js file differ from a regular error.js file in the App Router? How would you set up a comprehensive error handling strategy across a large Next.js application with many route segments?
Advertisement
Next.js › Error Handling & Not Found Pages

How do you create a custom error page for a specific route segment in the App Router?

Beginner

Answer

You add a file named error.js inside a route folder, which must be a client component, and Next.js automatically shows it whenever an error occurs while rendering that route or any of its nested pages, letting you display a friendly message instead of a broken page.
'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong.</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}
Real-world example A dashboard shows a friendly error message with a retry button whenever loading a user's data fails, instead of leaving them with a blank or broken screen.

Common follow-ups: Why does the error boundary file need to be a client component?;What does the reset function actually do when called?

Client Components & Hydration;Testing Next.js Applications
All 5 Error Handling & Not Found Pages questions