Error.tsx for route errors in NextJS - Mini Project: Build & Apply

Create an Error.tsx Component for Route Errors in Next.js

📖 Scenario: You are building a Next.js app that needs a friendly error page for route errors like 404 or 500.This page should show a clear message and a button to go back home.

🎯 Goal: Build an Error.tsx component that displays the error statusCode and a message. Include a button that navigates back to the homepage.

📋 What You'll Learn

Create a functional React component named Error in Error.tsx.

Accept a prop called statusCode of type number.

Display the statusCode and a friendly error message.

Add a button that uses Next.js useRouter to navigate back to the homepage when clicked.

Use semantic HTML and accessible attributes.

💡 Why This Matters

🌍 Real World

Error pages improve user experience by clearly showing when something goes wrong and guiding users back to safety.

💼 Career

Creating accessible and user-friendly error components is a common task for frontend developers working with Next.js or React.

1

Setup the Error component with props

Create a functional React component called Error in Error.tsx. It should accept a prop named statusCode of type number. Export this component as default.

NextJS

import React from 'react';

// Your code here

Hint

Define an interface ErrorProps with statusCode as a number. Then create a function Error that takes { statusCode } as props and export it.

2

Add basic error message display

Inside the Error component, return a main element containing an h1 that shows Error {statusCode} and a p with the text Sorry, something went wrong.

NextJS

import React from 'react';

interface ErrorProps {
  statusCode: number;
}

export default function Error({ statusCode }: ErrorProps) {
  // Add main, h1, and p elements here
  return null;
}

Hint

Use JSX to return a main element with an h1 showing the error code and a p with the message.

3

Import useRouter and add navigation button

Import useRouter from next/router. Inside the Error component, call const router = useRouter(). Add a button with aria-label="Go back to homepage" that calls router.push('/') when clicked.

NextJS

import React from 'react';
// Import useRouter here

interface ErrorProps {
  statusCode: number;
}

export default function Error({ statusCode }: ErrorProps) {
  // Initialize router here

  return (
    
      Error {statusCode}
      Sorry, something went wrong.
      {/* Add button here */}
    
  );
}

Hint

Import useRouter from next/router. Use it to navigate home when the button is clicked.

4

Add semantic and accessible structure

Wrap the content inside a section with role="alert" for accessibility. Add a footer with a small text Contact support if the problem persists.

NextJS

import React from 'react';
import { useRouter } from 'next/router';

interface ErrorProps {
  statusCode: number;
}

export default function Error({ statusCode }: ErrorProps) {
  const router = useRouter();

  return (
    
      {/* Wrap content in section with role alert */}
      {/* Add footer with support message */}
    
  );
}

Hint

Use a section with role="alert" to wrap the error message and button. Add a footer with a small support message below.

Practice

1. What is the main purpose of the Error.tsx file in a Next.js route?

easy

A. To define the main layout of the application

B. To display a friendly message when a route fails or an error occurs

C. To handle user authentication and login

D. To fetch data from an API for the route

Solution

1. Step 1: Understand the role of Error.tsx in Next.js

   Error.tsx is designed to catch errors in routes and show a user-friendly message instead of a broken page.

2. Step 2: Compare with other options

   Layouts, authentication, and data fetching are handled elsewhere, not in Error.tsx.

3. Final Answer:

   To display a friendly message when a route fails or an error occurs -> Option B

4. Quick Check:

   Error.tsx shows friendly error messages [OK]

Hint: Error.tsx shows errors, not layouts or data [OK]

Common Mistakes:

• Confusing Error.tsx with layout or data files
• Thinking Error.tsx handles authentication
• Assuming Error.tsx fetches API data

2. Which of the following is the correct way to export a default Error component in Error.tsx for Next.js?

easy

A. export function Error() { return Error occurred; }

B. function Error() { return Error occurred; }

C. export default function Error() { return Error occurred; }

D. default export function Error() { return Error occurred; }

Solution

1. Step 1: Recall correct default export syntax in React/Next.js

   The correct syntax is to declare the function and export it as default in one statement.

2. Step 2: Identify syntax errors in other options

   function Error() { return
   Error occurred; } misses export, C exports a named function, D has invalid syntax.

3. Final Answer:

   export default function Error() { return <div>Error occurred</div>; } -> Option C

4. Quick Check:

   Default export uses 'export default function' [OK]

Hint: Default export needs 'export default function' [OK]

Common Mistakes:

• Forgetting to export the component
• Using named export instead of default
• Incorrect export syntax like 'default export'

3. Given this Error.tsx component, what will be rendered when an error occurs?

export default function Error() {
  return (
    <main role="alert" aria-live="assertive">
      <h1>Oops! Something went wrong.</h1>
      <button onClick={() => window.location.reload()}>Try Again</button>
    </main>
  );
}

medium

A. A heading with an error message and a button to reload the page

B. A blank page with no content

C. Only a button that does nothing

D. An error stack trace displayed to the user

Solution

1. Step 1: Analyze the JSX returned by the Error component

   The component returns a main element with a heading and a button that reloads the page on click.

2. Step 2: Understand the button behavior

   The button triggers window.location.reload(), so it reloads the current page when clicked.

3. Final Answer:

   A heading with an error message and a button to reload the page -> Option A

4. Quick Check:

   Error component shows message + reload button [OK]

Hint: Look for JSX elements and button onClick behavior [OK]

Common Mistakes:

• Assuming no content renders
• Thinking button does nothing
• Expecting error stack trace to show

4. What is wrong with this Error.tsx component code?

export default function Error() {
  return (
    <div>
      <h1>Error!</h1>
      <button onClick={reloadPage}>Reload</button>
    </div>
  );
}

function reloadPage() {
  location.reload;
}

medium

A. The reloadPage function does not call location.reload() correctly

B. The button should not have an onClick handler

C. The component must use a <main> tag instead of <div>

D. The function reloadPage should be inside the component

Solution

1. Step 1: Check the reloadPage function implementation

   location.reload is a function and must be called with parentheses: location.reload()

2. Step 2: Verify other parts

   The button can have onClick, using div is allowed, and reloadPage can be outside the component.

3. Final Answer:

   The reloadPage function does not call location.reload() correctly -> Option A

4. Quick Check:

   Call functions with parentheses to execute [OK]

Hint: Check if functions are called with () [OK]

Common Mistakes:

• Forgetting parentheses on function calls
• Thinking onClick is invalid on button
• Believing HTML tags must be <main>

5. You want to improve accessibility in your Error.tsx component by adding ARIA roles and live regions. Which of these changes is best practice?

hard

A. Use a <div> with aria-hidden="true" around the error message

B. Remove all ARIA attributes to keep it simple

C. Add tabindex="-1" to the button only

D. Wrap the error message in a <main> with role="alert" and aria-live="assertive"

Solution

1. Step 1: Understand ARIA roles for error messages

   Using role="alert" and aria-live="assertive" notifies screen readers immediately about errors.

2. Step 2: Evaluate other options

   aria-hidden="true" hides content from screen readers, tabindex="-1" on button is unrelated, removing ARIA reduces accessibility.

3. Final Answer:

   Wrap the error message in a <main> with role="alert" and aria-live="assertive" -> Option D

4. Quick Check:

   Use role="alert" and aria-live for error accessibility [OK]

Hint: Use role="alert" and aria-live="assertive" for errors [OK]

Common Mistakes:

• Hiding error messages from screen readers
• Misusing tabindex on unrelated elements
• Removing ARIA attributes thinking they are optional