Layouts And Pages

Layouts Share Persistent UI

Layouts wrap child segments and preserve state across navigations within their subtree. A dashboard sidebar layout stays mounted while users navigate between dashboard pages — scroll position and client state in the layout persist.

Layouts can nest indefinitely: root → app shell → section → page. Each level adds UI chrome appropriate to that segment depth without duplicating wrappers in every page file.

• Layouts do not remount on child navigation
• Nested layouts compose UI hierarchy
• Layout state persists across child routes

export default function DashboardLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Pages Render Route Content

Pages are Server Components by default exporting the unique UI for their segment. Keep pages focused — fetch data, compose feature components, define segment metadata. Move reusable pieces to shared components.

Pages receive `params` and `searchParams` as props (async in newer Next.js versions). Type them explicitly for compile-time route param safety.

• One page.tsx per route segment
• Receive params and searchParams
• Keep pages thin — delegate to components

Template vs Layout

`template.tsx` is like layout but remounts on navigation, resetting client state inside it. Use templates for enter animations or analytics that should fire on every visit to a child route.

Most applications use layouts exclusively. Reach for templates only when remount behavior is explicitly required — they are less common in production codebases.

• template.tsx remounts on navigation
• layout.tsx persists state
• Templates for enter animations or per-visit effects

Parallel and Intercepting Routes

Parallel routes (`@modal`, `@sidebar` slots) render multiple pages in the same layout simultaneously — useful for modals and split views. Intercepting routes (`(.)photo`) show content in overlay while preserving URL for deep linking.

These advanced patterns power Instagram-like modals and complex dashboards. Master basic layouts before adopting — they add routing complexity that must be justified by UX requirements.

• Parallel routes for simultaneous slots
• Intercepting routes for modal overlays
• Advanced — adopt when UX requires

Composition Patterns

Pass Server Components as children to Client Components for flexible composition — the client wrapper handles interactivity while server children render static or fetched content.

Avoid prop drilling across layout boundaries — use context providers in client layout wrappers when multiple client children need shared state. Keep providers as deep as possible.

• Server children through client wrappers
• Client providers in layout when needed
• Minimize provider scope depth