layout.tsx — Shared UI

~20 min · layout, persistence, root layout

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Layouts wrap and persist

A layout.tsx wraps every route at and below its segment. The crucial property: layouts persist across navigation. When a user clicks between sibling pages, the layout component does not unmount. Sidebars, navigation, and any state in the layout stay alive.

The required root layout

Every Next.js app needs a root layout at app/layout.tsx. It must render the <html> and <body> tags — nowhere else does. This is where global font, language attribute, and the body class live.

Layout props

Layouts take children (the nested page or layout) and, in v15+, params as a Promise when the layout is inside a dynamic segment.

What layouts can't do

Layouts don't receive searchParams. If a layout depends on the query string, restructure: pass the data through the URL into a Server Component inside the page, not the layout.

Code

Required root layout·tsx

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="min-h-screen bg-white text-gray-900 antialiased">
        <SiteNav />
        <main className="mx-auto max-w-5xl p-6">{children}</main>
        <SiteFooter />
      </body>
    </html>
  );
}

Nested layout with awaited params·tsx

// app/team/[teamId]/layout.tsx
export default async function TeamLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ teamId: string }>;
}) {
  const { teamId } = await params;
  return (
    <div className="grid grid-cols-[200px_1fr] gap-6">
      <TeamSidebar teamId={teamId} />
      {children}
    </div>
  );
}

External links

Layout file convention

Exercise

Add a layout for your /dashboard/… routes that includes a sidebar with nav links. Click between two child pages and confirm the sidebar's local state (e.g., a collapse toggle) survives navigation.