Foundations
Layouts vs. pages
Lesson 2 of 3
What you'll learn
- Know what belongs in a layout vs. a page
- Understand that layouts stay mounted across navigations
- Keep navigation context stable as users move between pages
A layout wraps a route segment and stays mounted while the pages inside it change. A page is the leaf UI for one URL. The split matters because it decides what survives a navigation and what re-renders.
// app/layout.tsx — the frame: header, nav, providers. Stays put.
export default function RootLayout({ children }) {
return <AppShell>{children}</AppShell>;
}
// app/dashboard/page.tsx — the painting: swaps when the URL changes.
export default function DashboardPage() {
return <Dashboard />;
}
Put durable chrome — navigation, branding, providers, the sidebar — in a layout. Put route-specific work — the current lesson, a form, a detail view — in the page. When a learner clicks to the next lesson, the layout (and its scroll position, its open menus) persists; only the page swaps.
The test
Ask: "should this survive moving to the next page?" Persistent nav and context → layout. The thing that is this page → page. Getting it wrong is why apps flash their header on every click.
The challenge models nested layouts wrapping a page, in render order. Run it.
Each layout wraps the next; the page is innermost. Run it to see the composition order.
Next: crossing the server boundary with route handlers and data fetching.
Sign in to save your progress across devices.