loading-error-boundarieslisted

# loading-error-boundaries Use when adding or restructuring routes in `app/`. Next.js boundary files (`loading.tsx`, `error.tsx`, `not-found.tsx`) define UX during Server Component rendering, server failures, and missing-resource cases. Placement matters: too high = whole page flashes on partial load; too low = errors leak past the intended catch. ## The 4 boundary files | File | Wraps | Renders when | |---|---|---| | `loading.tsx` | Sibling `page.tsx` in a Suspense boundary | Async server work in progress | | `error.tsx` | Sibling `page.tsx` + descendants in an Error Boundary | Server throws OR client error | | `not-found.tsx` | Triggered by `notFound()` call | `notFound()` from a Server Component / handler | | `global-error.tsx` | Wraps the root `app/layout.tsx` itself | Layout throws (rare) | `error.tsx` and `global-error.tsx` MUST be Client Components (they catch React errors). ## Placement: as low as practical Place boundary files **at the segment that owns the unique loading state**, not at the root. ``` app/ ├── (app)/ │ ├── layout.tsx # auth check, app shell │ ├── dashboard/ │ │ ├── page.tsx │ │ ├── loading.tsx # skeleton of dashboard widgets │ │ └── error.tsx # error display in app shell context │ └── settings/ │ ├── page.tsx │ └─�� loading.tsx # skeleton of settings form └── (marketing)/ ├── layout.tsx └── blog/ ├── [slug]/ │ ├── page.tsx │ ├── loading.tsx # article