Chapter
01a · Special Files (not-found, error, loading)
Route-level fallbacks: not-found.tsx, error.tsx, loading.tsx — declarative edge cases for every route segment.
Mental Model
- Each route segment can own its fallback trio: no-data, error, loading.
- They are co-located with the segment — never a global catch-all unless truly universal.
- RSC streaming makes
loading.tsxper-segment without extra effort.
not-found.tsx
- Triggered when
notFound()is called in a Server Page or action. - Scoped to the route segment — nested segments fall through to the nearest ancestor not-found.
- Keep it specific: "Trip not found" vs "Page not found".
error.tsx
- Client boundary that catches render-phase errors in the segment tree.
- Must be a Client Component ("use client"). Exports
error+reset(). - Does NOT catch errors in
layout.tsxof the same segment — layout errors bubble up. - Rule: log to console in dev, send to monitoring in prod; never display raw stack traces.
loading.tsx
- Rendered while the segment's Server Page is awaiting promises (Suspense fallback).
- Co-located loading states are automatic with the App Router — no manual Suspense boundaries needed for page-level.
- Keep minimal: skeleton, spinner, or nothing (instant navigation).