Why this lesson matters

Understand not found states and use it correctly in an App Router project. Loading, error and not-found files are route-level UX contracts. They let users understand latency, recover from render failures and distinguish missing resources from internal errors.

How to reason about it

  • For Not Found States, the outcome to verify is: Use an explicit 404 state when the resource does not exist.
  • In Not Found States, keep this failure controlled: A generic spinner or leaked stack trace gives users no useful recovery path and can expose implementation details.
  • Not Found States practice target: Add loading, recoverable error and not-found states to one dynamic route, then trigger each state deliberately.

Practical walkthrough

In the Not Found States walkthrough: Use an explicit 404 state when the resource does not exist.

app/products/[id]/page.tsxtsx
import { notFound } from 'next/navigation';

const product = await getProduct(id);
if (!product) notFound();

Practice it yourself

Practice

Not Found States exercise

Add loading, recoverable error and not-found states to one dynamic route, then trigger each state deliberately.

  • Record the expected result before execution
  • Test one valid path and one lesson-specific failure path
  • Explain in two lines which boundary owns the decision

Summary