A [Next.js](/courses/nextjs) layout receives a `children` prop that represents the UI nested beneath that layout in the route hierarchy. ### Basic Example ```jsx export default function DashboardLayout({ children }) { return (

{children}

); } ``` If the user visits: ```text /dashboard/users ``` and the project contains: ```text app/ dashboard/ layout.js users/ page.js ``` then the users page is effectively supplied to the layout through `children`. Conceptually: ```jsx ``` ### The Important Point You normally do **not** manually write: ```jsx ``` [Next.js](/courses/nextjs) constructs this relationship automatically from the route hierarchy. ### `children` Can Represent More Than a Direct Page Suppose you have: ```text app/dashboard/layout.js app/dashboard/settings/layout.js app/dashboard/settings/profile/page.js ``` The dashboard layout's `children` effectively contains the nested settings layout: ```text DashboardLayout ↓ children SettingsLayout ↓ children ProfilePage ``` This is what allows layouts to compose naturally. ### Placement Matters The position of `{children}` determines where route-specific UI appears. For example: ```jsx export default function Layout({ children }) { return ( <>

{children}