# Layouts and Pages — Next.js

Source: https://www.skillbyai.com/en/nextjs/r-layout

> Shared UI that persists.

## 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.

![Three ideas: layouts, dynamic routes, not-found.](assets/figures/nextjs/section-2-map.svg) — Figure 2.1 — Layouts, dynamic routes and not-found.

## 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.

```tsx
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.

**Quiz:** What happens to a layout when the user navigates between its child pages?

- [ ] It is destroyed and rebuilt
- [x] It stays mounted and keeps its state
- [ ] The whole site reloads
- [ ] Its children are ignored

*Answer:* It stays mounted and keeps its state. Layouts persist across navigation.