Global-error.tsx for root errors in NextJS - Mini Project: Build & Apply

Create a Global-error.tsx for Root Errors in Next.js

📖 Scenario: You are building a Next.js app that needs a friendly error page to show when something goes wrong at the root level. This helps users understand there was a problem without seeing confusing technical details.

🎯 Goal: Build a Global-error.tsx component that catches root errors and displays a simple message with a button to reload the page.

📋 What You'll Learn

Create a React functional component named GlobalError in Global-error.tsx.

Use the error and reset props to show error details and reset the error state.

Display a heading with the text Something went wrong!.

Show the error message inside a <pre> tag for readability.

Add a button labeled Try again that calls the reset function when clicked.

Use semantic HTML and accessible attributes like aria-label.

Style the component with simple inline styles for clarity.

💡 Why This Matters

🌍 Real World

Global error components help apps show friendly messages when something unexpected happens, improving user trust and experience.

💼 Career

Understanding error boundaries and global error handling is important for building robust React and Next.js applications in professional development.

1

Create the GlobalError component skeleton

Create a React functional component named GlobalError in Global-error.tsx that accepts error and reset as props. Return a <div> with a heading <h1>Something went wrong!</h1> inside.

NextJS

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  // Your code here
}

Need a hint?

Start by defining the function with the correct props and return a div with the heading inside.

2

Display the error message inside a <pre> tag

Inside the GlobalError component, below the heading, add a <pre> tag that displays the error message using {error.message}.

NextJS

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    
      Something went wrong!
      {/* Add error message here */}
    
  )
}

Need a hint?

Use a <pre> tag to show the error message exactly as it is.

3

Add a button to reset the error state

Below the error message, add a <button> with the text Try again. Set its onClick attribute to call the reset function. Add aria-label="Try again button" for accessibility.

NextJS

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    
      Something went wrong!
      {error.message}
      {/* Add reset button here */}
    
  )
}

Need a hint?

Add a button that calls reset when clicked and includes an aria-label for screen readers.

4

Add simple inline styles for clarity

Add inline styles to the <div> to center the content with textAlign: 'center' and add padding padding: '2rem'. Also add style={{ marginTop: '1rem' }} to the <button> for spacing.

NextJS

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    
      Something went wrong!
      {error.message}
      
        Try again
      
    
  )
}

Need a hint?

Use inline style objects to add simple spacing and center alignment.