Recommended
Consider this Next.js Global-error.tsx component used for root error handling. What will it display when an error is caught?
import React from 'react'; export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) { return ( <html lang="en"> <head> <title>Error</title> </head> <body> <main role="alert" aria-live="assertive" style={{ padding: '2rem', fontFamily: 'Arial, sans-serif' }}> <h1>Something went wrong!</h1> <p>{error.message}</p> <button onClick={reset} aria-label="Try again">Try again</button> </main> </body> </html> ); }
Look for the JSX elements inside the return statement and what props are used.
The component renders a heading, the error message, and a button that calls the reset function to retry. This is the expected behavior for a root error boundary in Next.js.
Given the GlobalError component, which option correctly types the props error and reset in TypeScript?
export default function GlobalError(props) { const { error, reset } = props; // component body }
Remember the correct way to type destructured props in a function parameter.
Option C correctly destructures props and types them as an object with error of type Error and reset as a function returning void.
In the GlobalError component, what is the effect of clicking the 'Try again' button?
export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) { return ( <button onClick={reset} aria-label="Try again">Try again</button> ); }
Think about what the reset callback is meant to do in error boundaries.
The reset function is provided by Next.js to retry rendering the root component after an error. Clicking the button triggers this retry.
Examine this code snippet. Why might it cause a hydration mismatch error in Next.js?
export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) { if (!error) { return <p>No error found</p>; } return ( <html lang="en"> <head><title>Error</title></head> <body> <h1>Error occurred</h1> <button onClick={reset}>Try again</button> </body> </html> ); }
Consider how Next.js expects consistent root elements for hydration.
Returning different root elements conditionally (sometimes a
, sometimes a full ) causes hydration mismatch errors because the server and client render different structures.
In Next.js App Router, what is the primary purpose of the Global-error.tsx file placed at the root of the app directory?
Think about how Next.js handles errors in the new App Router structure.
The Global-error.tsx file is a special file that Next.js uses as the root error boundary. It catches errors thrown anywhere in the app and renders a fallback UI.