Layouts and Templates
Layouts and Templates
# Layouts and Templates
A **layout** is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.
You can define a layout by default exporting a React component from a `layout.js` file. The component should accept a `children` prop that will be populated with a child layout (if it exists) or a page during rendering.
```tsx
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode
}) {
return (
{/* Include shared UI here e.g. a header or sidebar */}
{children}
)
}
```
## The Root Layout
The root layout is defined at the top level of the `app` directory and applies to all routes. This layout is required and must contain `` and `` tags, allowing you to modify the initial HTML returned from the server.
A **layout** is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.
You can define a layout by default exporting a React component from a `layout.js` file. The component should accept a `children` prop that will be populated with a child layout (if it exists) or a page during rendering.
```tsx
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode
}) {
return (
{/* Include shared UI here e.g. a header or sidebar */}
{children}
)
}
```
## The Root Layout
The root layout is defined at the top level of the `app` directory and applies to all routes. This layout is required and must contain `` and `` tags, allowing you to modify the initial HTML returned from the server.