loading.tsx and error.tsx are Suspense and an error boundary
The first fetch fails on purpose, the retry succeeds. retry in Next.js re-fetches and re-renders the segment, which this model imitates by creating a new promise. onCaughtError: () => {} only keeps React's caught-error log out of the console.
Next.js is the most used React framework: in its App Router, folders inside app/ are URL segments, special files (page, layout, loading, error, not-found) build each route's UI, components are server components unless a file says "use client", and next/link and next/image handle fast navigation and optimised images.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the files for a docs section with URLs /docs and /docs/<topic>, a shared sidebar layout, and a loading state.
Write a not-found.tsx and the code in app/docs/[topic]/page.tsx that shows it for unknown topics.
Explain it without notes
How does file-based routing work in the App Router? Include dynamic segments.
What is the difference between a layout, a template and a page?
What do loading.tsx and error.tsx do under the hood?
When does a component in a Next.js app need "use client"?
What does next/link add over a plain <a>, and what does next/image add over <img>?
Preview
Console
Nothing logged yet.Expected console output
at 100 ms: Dashboard | Loading dashboard...
at 450 ms: Dashboard | Something went wrong: database timeout | Try again
at 600 ms: Dashboard | Loading dashboard...
at 950 ms: Dashboard | Visits today: 1200