All 5 Error Handling & Not Found Pages questions
More in Error Handling & Not Found Pages
How do you create a custom error page for a specific route segment in the App Router? 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 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 does the global-error.js file differ from a regular error.js file in the App Router?

Intermediate

Answer

The global-error.js file, placed at the root of the app folder, catches errors that occur in the root layout itself, which regular error.js files cannot catch since they are nested inside the layout. It must include its own html and body tags since it replaces the entire root layout when an error happens there.
// app/global-error.js
'use client';

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>A critical error occurred.</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  );
}
Real-world example An application catches a rare error that occurs inside its root layout itself using global-error.js, preventing the entire site from showing a completely blank white screen to visitors.

Common follow-ups: Why does global-error.js need its own html and body tags?;How often does an error actually occur at the root layout level?

Layouts & Templates;Client Components & Hydration
All 5 Error Handling & Not Found Pages questions