Why this matters
Improves UX and isolates failures per route segment.
For async routes, add loading.tsx for suspense fallbacks and error.tsx for boundaries. Use notFound() for 404 states.
Improves UX and isolates failures per route segment.
Side-by-side examples engineers can pattern-match during review.
Manual spinner inside page.tsx with local state// app/posts/loading.tsx -> skeleton
// app/posts/error.tsx -> friendly error
import { notFound } from 'next/navigation'
export default async function Page(){ const post = await getPost(); if(!post) return notFound(); return <div>{post.title}</div> }try/catch inside page.tsx without error.tsxerror.tsx + loading.tsx in the segmentFrom the same buckets as this rule.