Error.tsx for route errors in NextJS

Introduction

An Error.tsx file helps show a friendly message when something goes wrong on a page. It stops the app from crashing and tells users there was a problem.

When a page fails to load due to a server or client error.

When you want to show a custom message instead of a blank or broken page.

When you want to catch unexpected errors in a route and handle them gracefully.

When you want to log errors or provide a way for users to retry or go back.

When you want consistent error pages across your Next.js app.

Syntax

NextJS

'use client';
import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <main role="alert" aria-live="assertive" style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>Oops! Something went wrong.</h1>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </main>
  );
}

The Error component receives an error object and a reset function.

Use aria-live="assertive" and role="alert" for accessibility so screen readers announce the error.

Examples

A simple error component showing the error message and a reload button.

NextJS

'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Error occurred:</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Reload</button>
    </div>
  );
}

A minimal error display with red text.

NextJS

export default function Error({ error }) {
  return <p style={{ color: 'red' }}>Error: {error.message}</p>;
}

Sample Program

This Error.tsx component catches route errors in Next.js. It logs the error to the console for developers and shows a clear message to users. The button calls reset() to retry loading the route.

NextJS

'use client';
import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    console.error('Route error:', error);
  }, [error]);

  return (
    <main role="alert" aria-live="assertive" style={{ padding: '2rem', textAlign: 'center', fontFamily: 'Arial, sans-serif' }}>
      <h1>Oops! Something went wrong.</h1>
      <p>{error.message}</p>
      <button onClick={() => reset()} style={{ padding: '0.5rem 1rem', fontSize: '1rem', cursor: 'pointer' }}>
        Try again
      </button>
    </main>
  );
}

Important Notes

Always include aria-live and role attributes for screen reader users.

The reset function helps users retry loading the page without refreshing the whole browser.

Logging errors in useEffect helps developers find issues during debugging.

Summary

Error.tsx shows friendly messages when routes fail.

It improves user experience by preventing blank or broken pages.

Use accessibility features and provide a retry button for best results.