1. Defining Layouts in Next.js
The layout.js file defines the structure of a route segment. It must accept a children prop to render nested content.
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return <section>{children}</section>
}2. Root Layout — The App’s Global Structure
The app/layout.tsx file defines the global layout and must include <html> and <body> tags.
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}3. Receiving Dynamic Params
Layouts can receive a params prop containing dynamic route parameters.
// app/dashboard/[team]/layout.tsx
export default async function Layout({ children, params }) {
const { team } = await params
return (
<section>
<h1>Welcome to {team}'s Dashboard</h1>
{children}
</section>
)
}4. Using LayoutProps for Strong Typing
Use LayoutProps to infer types for params and named slots.
export default function Layout(props: LayoutProps<'/dashboard'>) {
return (
<section>
{props.children}
{/* props.analytics if @analytics slot exists */}
</section>
)
}5. Performance and Caching Notes
- Layouts are cached and do not re-render on navigation.
- To access request data, use
cookies()orheaders()in Server Components. - To access query params, use
useSearchParams()in Client Components. - To access pathname, use
usePathname()in Client Components.
6. Displaying Content Based on Params
Use dynamic params to personalize layout content.
// app/dashboard/layout.tsx
export default async function Layout({ children, params }) {
const { team } = await params
return (
<section>
<header><h1>Welcome to {team}'s Dashboard</h1></header>
<main>{children}</main>
</section>
)
}7. Using Params in Client Components
Client Components can use React’s use() to read params.
'use client'
import { use } from 'react'
export default function Page({ params }) {
const { slug } = use(params)
}Conclusion
The layout.js file in Next.js is essential for structuring your application. With props like children and params, you can build dynamic, cached, and personalized layouts. Client Components help you access live data like query params and pathname during navigation.