How does file-based routing work in the App Router? What are layouts?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Folders map to URL segments; page.tsx makes a route public. layout.tsx wraps its segment and all children, persists across navigations, and nests — a root layout holds <html>; nested layouts compose for shared section chrome.
Detailed explanation
The app directory encodes structure: app/dashboard/settings/page.tsx serves /dashboard/settings. Files have reserved meanings — page.tsx (route UI), layout.tsx (persistent wrapper), loading.tsx (Suspense fallback), error.tsx (error boundary), not-found.tsx, route.ts (API handler), template.tsx (layout that re-mounts on navigation). Layouts receive children and render them without unmounting during child navigation: state inside a sidebar survives moving between pages. Nesting composes naturally — root layout defines html/body; a dashboard layout adds nav; each page fills the innermost slot. Only one active page renders per URL; multiple layouts stack automatically. Route groups (folder-name) organize without affecting URLs, handy for marketing vs app shells with different roots. Colocation keeps private files beside their routes since only special filenames become endpoints.
Example
app/
├─ layout.tsx # <html>, global providers
├─ page.tsx # /
└─ dashboard/
├─ layout.tsx # sidebar wraps everything below
├─ page.tsx # /dashboard
└─ settings/
└─ page.tsx # /dashboard/settings
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar /> {/* never unmounts between pages */}
<main>{children}</main>
</div>
);
}Interview tip
Sketch the folder tree verbally while explaining layout persistence — the sidebar-stays-mounted example demonstrates you understand why layouts exist.
Common mistakes
- Not knowing only special filenames create routes.
- Confusing layouts with templates (templates remount per navigation).