errors pattern
404 — not found
The route exists in the router but the resource is missing.
When to use it
Bad URL, deleted resource, or typo. Default for unmatched routes.
- User understands what happened in <3s
- Clear path back
- Search affordance
Layout regions
- header
- main
- footer
States
- default
Example
// app/not-found.tsx
export default function NotFound() {
return <Container><h1>This page doesn't exist</h1><Stack><Button asChild><Link href="/">Back home</Link></Button></Stack></Container>
}The full 404 — not found pattern specifies 3 exact microcopy strings, 1 motion spec, 3 composition rules — all gated behind the full recipe. Get the full recipe.