How do loading.tsx, error.tsx and not-found.tsx work together?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
They're per-segment conventions built on React primitives: loading.tsx is an automatic Suspense boundary, error.tsx is an error boundary that must be a client component receiving reset(), not-found.tsx renders for 404s including notFound() calls. Each scopes to its folder level and nests.
Detailed explanation
Next.js turns common UI states into file conventions wrapping each route segment. loading.tsx wraps the segment's page in <Suspense fallback={<Loading/>}>: navigation shows it instantly while server data streams in — no manual skeleton wiring. error.tsx creates an Error Boundary catching render/data failures below its position; it must start with 'use client', receives error plus reset() to retry the segment without reloading the whole app — pair with a button calling reset(). not-found.tsx handles two triggers: users hitting unmatched URLs and code calling notFound() deliberately for missing records (the idiomatic 404 for dynamic params). Nesting means granular recovery: a failing widget errors its nearest boundary, keeping surrounding chrome alive. template.tsx rounds out the family (remounts on navigation). Together they encode resilient UI architecture declaratively.
Example
// app/products/error.tsx
'use client';
export default function ProductsError({ error, reset }) {
return (
<div role="alert">
<p>Couldn't load products: {error.message}</p>
<button onClick={reset}>Try again</button>
</div>
);
}
// app/products/[id]/page.tsx
import { notFound } from 'next/navigation';
if (!product) notFound(); // renders nearest not-found.tsxInterview tip
Map each file to its React primitive (Suspense, ErrorBoundary) first — then the reset() retry flow and notFound() usage show practical fluency.
Common mistakes
- Forgetting 'use client' in error.tsx.
- Expecting error boundaries to catch event handlers or server actions.