Layouts and navigating with Link

lesson 2-3 · ~10 min · 6/29

Layouts: the shared shell

Every real site repeats its chrome — the fixed framing around the content — on every page: nav bar, footer, fonts. In the React course you solved this by composing components manually on each page. Next.js formalizes it with layout.js:

// app/layout.js  (the required root layout)
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>My Site</nav>
        {children}
      </body>
    </html>
  );
}

Decode it:

The root layout must render <html> and <body>. It replaces the old index.html.
children is the current page. Navigate from / to /about and only children changes.
The layout component itself does not re-render or lose state when you move between its pages.

Layouts nest

Drop another layout.js deeper in the tree and it wraps only that section:

app/
├── layout.js          ← wraps everything
└── docs/
    ├── layout.js      ← wraps only /docs/*  (e.g. a sidebar)
    ├── page.js        →  /docs
    └── setup/page.js  →  /docs/setup

Visiting /docs/setup renders root layout → docs layout → the setup page, nested like Russian dolls. This is the same composition-with-children pattern from the React course, applied by the router automatically.

Quiz

A user navigates from /docs to /docs/setup. The docs layout contains a search input with text typed into it. What happens to that text?

Link: navigation without the reload

A plain <a href="/about"> works, but it triggers a full page reload: the browser throws everything away and starts over. Next.js ships a smarter component:

import Link from "next/link";

<Link href="/about">About</Link>

What Link buys you:

Client-side navigation. Only the changing part of the tree is swapped in, and layout state survives (as in the quiz above).
Prefetching. Next.js can start loading the target page before the click, so navigation feels instant.

Rule of thumb: Link for every internal route, plain <a> only for external sites.

Problem

A teammate built the site nav using plain <a href="/pricing"> tags, and users report that the theme picker in the root layout resets on every click. Which component should the <a> tags be replaced with? (one word)