layout.js in Next.js — Structuring Pages with Flexibility and Intelligence

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() or headers() 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.