A **layout** is shared UI that wraps pages and other nested layouts inside a route segment. Layouts are created using a special `layout.js` or `layout.tsx` file. ### Example Suppose a dashboard contains several pages: ```text /dashboard /dashboard/users /dashboard/settings /dashboard/analytics ``` All of these pages may need the same sidebar and header. Instead of repeating them in every page, you can create: ```text app/ dashboard/ layout.js page.js users/ page.js settings/ page.js ``` The layout can contain the shared UI: ```jsx export default function DashboardLayout({ children }) { return (

Dashboard Header

{children}

); } ``` When the user visits: ```text /dashboard/users ``` [Next.js](/courses/nextjs) conceptually renders: ```jsx ``` The same layout also wraps `/dashboard/settings`, `/dashboard/analytics`, and other descendant routes. ### Why Layouts Matter Layouts are useful for UI that should remain consistent across related pages, such as: - navigation bars - dashboard sidebars - headers - footers - account menus - section navigation - providers - persistent interface controls ### Layout vs Repeating Components Without a layout, developers might repeat this structure: ```jsx

``` inside every dashboard page. With a layout, the shared structure is declared once and automatically wraps the child routes. ### Important Behavior Layouts are not simply reusable [React](/courses/reactjs) components that you manually import into every page. They are part of the [Next.js](/courses/nextjs) routing hierarchy. Next.js automatically determines which layouts wrap which pages based on their positions in the `app` directory. ### Interview-Ready Answer A layout in the [Next.js App Router](/courses/nextjs) is shared UI defined with `layout.js` or `layout.tsx`. It automatically wraps pages and nested layouts beneath its route segment. Layouts are commonly used for persistent UI such as headers, sidebars and navigation, reducing duplication and allowing shared interface state to remain available during navigation.