Layouts and Pages

The root layout and nesting

Every App Router project has a root layout in app/layout.tsx that renders <html> and <body> and wraps every page. Nested folders can add their own layouts (a dashboard sidebar, for example) that wrap only their segment. Layouts receive children, persist across navigation between their child pages (they do not re-render or lose state), and can export metadata defaults. Use next/link for navigation: it prefetches routes and performs client-side transitions.

URLs from folders

Layouts wrap pages, dynamic segments receive params, and notFound produces real 404s.

The root layout of the demo

This file is from a small demo store I built with Next.js 16.3.8, React 19.3 and TypeScript; next build compiled and type-checked it successfully. It defines a title template, a description and a navigation bar shared by every page.

import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: { template: "%s | Stationery Shop", default: "Stationery Shop" },
  description: "A small demo store built with the App Router",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav><Link href="/">Home</Link> <Link href="/counter">Counter</Link></nav>
        <main>{children}</main>
      </body>
    </html>
  );
}

Put shared UI in layouts, not pages

Navigation, sidebars and providers belong in layouts so they stay mounted while pages change.

Quick check: What happens to a layout when the user navigates between its child pages?

• It is destroyed and rebuilt
• It stays mounted and keeps its state
• The whole site reloads
• Its children are ignored