Keep global navigation and footer persistent across routes.
Application-wide shell
Next.js 16+ · Directive
layout
Use a layout file to define UI shared by a route segment and its descendants. Export a component that renders its required children prop; the root layout also defines the document's html and body elements.
How it works
Create a layout file that exports a React component receiving children. Next.js places the wrapped route content in children; layouts can exist at nested route levels, while the root layout supplies the document shell.
Syntax
export default function Layout({ children }: { children: React.ReactNode }) { return <>{children}</> }Parameters
| Name | Type | Description |
|---|---|---|
children | React.ReactNode | The route segments wrapped by the layout, supplied during rendering; this prop is required. |
Returns
A React element containing shared layout UI and the rendered children.
Key points
- A layout file defines shared UI for a route segment and its descendants.
- Within a segment's component hierarchy, layout is the outer wrapper around the other special files and page.
- The exported component should accept children and render it where descendant route content belongs.
- Every App Router app requires a top-level layout in app.
- Next.js supplies children with the route content enclosed by that layout.
Common mistakes
- The root layout must render both html and body; Next.js does not generate them for you.
- Do not expect a layout to rerender on every navigation; client-side caching preserves it across transitions.
Example: Required root layout
import type { ReactNode } from 'react'
export default function RootLayout({
children,
}: Readonly<{ children: ReactNode }>) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Save this as app/layout.tsx. It supplies the required document elements and renders the active route inside the shared root UI.
When to use it
Wrap a route subtree with its own sidebar, header, or contextual controls.
Section-specific shell
Retain layout state while users navigate between descendant pages.
Persistent interactive UI
Interview questions
QWhat is a Next.js App Router layout?
A layout is a shared UI component for a route segment and its descendants. It receives children, which contains the page or nested layout being wrapped.
Follow-up: How does nesting work? A layout in a deeper route folder wraps that segment's descendants, and parent layouts wrap the deeper layout through children.
QWhat makes a root layout different?
The app directory must have a root layout. The root layout defines html and body and commonly contains globally shared UI such as navigation or a footer.
Follow-up: What happens if html and body are omitted? The root layout is invalid because Next.js does not create those document tags automatically.
QWhat happens to layouts during navigation?
Layouts preserve state, remain interactive, and do not rerender during navigation. This makes them suitable for persistent application chrome around changing page content.
Follow-up: When should route-specific UI use a page instead? Use page for UI unique to one route, while layout is for UI shared by a segment and its children.
Related
page.jstemplate.jserror.jsloading.jsnot-found.jsroute groups