Next.js

The App Router's File ConventionsIntermediateIn plain React, a filename is just a filename. In the App Router, a handful of exact filenames are instructions to the framework — get one wrong and the router silently ignores the file instead of erroring.12 min · 0/3 questions correct
Dynamic Route SegmentsIntermediateYou can't hand-write a page.tsx for every one of ten thousand product IDs. Dynamic segments let one file generate all ten thousand routes — and in current Next.js, reading which one matched means awaiting a promise, not reading a prop.11 min · 0/3 questions correct
Route Groups & Private FoldersIntermediateEvery folder in app/ becomes a URL segment by default — until you tell the router otherwise. Route groups and private folders are the two ways to opt a folder out of that default without moving files anywhere.9 min · 0/3 questions correct
Parallel RoutesIntermediateA dashboard doesn't have one piece of content, it has several — a team panel and an analytics panel that both need to live and navigate independently inside the same layout. Parallel routes render more than one page at once, in named slots.14 min · 0/3 questions correct
Intercepting RoutesIntermediateClicking a photo in a feed should open it in a modal, not navigate away — but a direct link to that same photo should load the full page. Intercepting routes let one URL render two different things depending on how you arrived.12 min · 0/3 questions correct
Layouts vs. TemplatesIntermediateTwo files with almost the same job — wrap children with shared UI — that behave in opposite ways on navigation. Picking the wrong one either silently loses state you needed to keep, or silently keeps state you needed to reset.10 min · 0/3 questions correct
Loading, Error & Not-Found UIIntermediateA route segment can be slow, can throw, or can point at something that doesn't exist — and the App Router has a dedicated file for each of those three states, wired up automatically, no manual boundary-wrangling required.11 min · 0/3 questions correct
Static vs. Dynamic RenderingIntermediateEvery route in the App Router quietly gets classified as static or dynamic before it ever serves a request — and one line of code, a single cookies() call, is enough to flip that classification for the whole route.13 min · 0/3 questions correct
fetch() Caching & Request MemoizationIntermediateOlder Next.js cached every fetch() call by default and made you opt out. This version inverts that completely — fetch() is not cached by default, and you have to opt in — which quietly breaks a lot of muscle memory.12 min · 0/3 questions correct
Cache Components & the "use cache" DirectiveIntermediateInstead of a route being either fully static or fully dynamic, Cache Components lets you cache one function inside an otherwise-dynamic page — the static/dynamic boundary moves from the route down to individual functions and components.14 min · 0/3 questions correct
Incremental Static Regeneration & Time-Based RevalidationIntermediateA blog doesn't need to be rebuilt every time a post changes, and it doesn't need to be dynamically rendered on every request either — ISR sits between those two extremes, serving stale content instantly while a fresh copy regenerates in the background.11 min · 0/3 questions correct
On-Demand RevalidationIntermediateA cache is only as good as your ability to say 'this is wrong now, fix it' the moment data changes. Next.js gives you three different ways to say that, and picking the wrong one either makes users wait or shows them stale data they just personally changed.12 min · 0/3 questions correct