App Router and File Conventions
In the App Router, folders are URL segments and special files decide what renders. Know how the file hierarchy nests, why layouts persist while templates remount, and how parallel and intercepting routes behave on soft and hard navigation.
Key points
- 1
A segment is routable only when it has
pageorroute. Other colocated files are never served, and_folderopts a whole subtree out of routing. - 2
Each segment renders layout > template > error > loading > not-found > page.
error.tsxcan't catch its own segment's layout; the parent boundary orglobal-errordoes. - 3
paramsandsearchParamsare promises, and Next.js 16 removed synchronous access. Await them, or use Reactusein Client Components. Layouts never receivesearchParams. - 4
Route groups
(name)organise files and can create multiple root layouts. Crossing root layouts is a full page load, and two groups must not resolve to the same URL. - 5
Parallel route slots (
@slot) keep their active page on soft navigation and renderdefault.jsafter a reload. In Next.js 16 every named slot needs adefault.js. - 6
Intercepting routes
(.),(..)and(...)count route segments, not folders, so@slotfolders don't count. Interception happens only on client navigation; a refresh shows the real page. - 7
generateStaticParamsmust return an array.dynamicParams = falsemakes unknown params 404, but it isn't available with Cache Components, where an empty params array is a build error.
Common traps
notFound()andforbidden()work by throwing. A broadtry/catchswallows them unless you rethrow, and once streaming has started the status stays 200.Choosing a parallel slot in a layout (
role === 'admin' ? admin : user) still renders both slots on the server, so authorize inside each slot.A modal slot stays visible after a
<Link>to another route unless the slot matches that route with a component that returnsnull, for example a catch-all.
Test yourself on App Router and File Conventions
Ten questions, with the answer and explanation after each one.