`layout.js`

Defines shared UI that wraps child segments and persists across navigation.

Since Next 13 (App Router) Spec ↗

Syntax

export default function Layout({ children, params }) { ... }

Parameters

Name	Type	Required	Description
`children`	`ReactNode`	Yes	The nested page or sub-layout to render.
`params`	`Promise<Record<string, string \| string[]>>`	No	Async dynamic params for this segment (Next 15).

Returns

ReactNode — Wrapper UI shared by descendant routes.

Examples

// app/layout.tsx — required root layout
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="grid">
      <Sidebar />
      <main>{children}</main>
    </div>
  )
}

Notes

The root `app/layout.js` is required and must render `<html>` and `<body>`. Layouts do NOT re-render on navigation between their child routes (state preserved). They cannot access `searchParams`; use the page or a client hook. Server Component by default.