Things go wrong: a database call fails, a record does not exist, a third-party API times out. A robust app contains these failures gracefully instead of showing a broken screen or crashing the whole page. The App Router gives you file conventions for exactly this — error.js to catch runtime errors in a route segment, not-found.js to render when content is missing, and the notFound function to trigger it deliberately. This exists because error handling in older React apps was ad hoc, often a single top-level boundary that turned any failure into a blank white screen for the entire app. The App Router scopes error handling to segments, so a failure in one part of the page is isolated and recoverable while the rest keeps working. Knowing these conventions is what separates a demo from something safe to put in front of real users.
30 minintermediate
Error Handling and Not-Found Pages
Analogy🏏Cricket
🏏 Think of it like cricket: Picture a Test match where, before the openers walk out, the curator has already prepared the pitch, the umpires are positioned, and the scoreboard is live — the players just play. Plain React is like arriving at an empty ground and being told to roll the pitch, set the field, and wire up the scoreboard yourself before a single ball is bowled. Just as the prepared ground lets the batsmen focus on batting rather than groundskeeping, Next.js prepares routing, rendering, and bundling so you focus on features rather than plumbing. Just as the live scoreboard shows runs the instant a shot is played, server rendering hands the browser finished HTML the instant the page loads. And just as every Test follows the same agreed laws so any team can play anywhere, the App Router's file conventions mean any developer can read the folder structure and instantly know the routes. This reveals why Next.js wins on large teams: shared conventions remove the guesswork that custom setups create.
Lesson 11 of 35
0% complete