Layouts

ELI5 — The Vibe Check

Layouts are wrapper components that persist across page navigations — things like headers, sidebars, and footers that don't change when you switch pages. In Next.js App Router, you just create a layout.tsx and it automatically wraps all child routes. Nested layouts are the real power move.

Real Talk

Layouts in modern frameworks are shared UI components that wrap child routes and persist across navigations. They maintain state, avoid re-rendering, and can be nested. In Next.js App Router, layout.tsx files define layouts per route segment, while Nuxt uses layouts/ directory with a definePageMeta configuration.

When You'll Hear This

"The dashboard layout with sidebar persists across all child pages — no re-mount" / "Nested layouts let us have different headers for marketing pages vs. app pages"