Routing and navigation
Create pages and layouts
Turn folders into URL segments and use layouts for interface that should persist while child routes change.
8 minute lesson
A folder inside app becomes a public route only when it contains a special route file such as page.tsx. A layout.tsx wraps pages below its segment.
Create app/notes/page.tsx for /notes. Add app/notes/layout.tsx when all note routes share navigation or structure. Layouts preserve state across navigation and receive the active child as children; ordinary reusable components do not need to be layouts.
The root layout is required and owns the document’s <html> and <body> elements. Nested layouts should express persistent route structure: navigation, a workspace shell, or a sidebar shared by descendants. Do not use a layout merely to avoid importing a component.
Persistence is visible during client navigation. A nested layout is not remounted as its child page changes, so local client state inside that layout can survive. A full reload creates a new document and resets it. Design with that lifecycle in mind rather than assuming every navigation starts the tree again.
// app/notes/layout.tsx
export default function NotesLayout({ children }: { children: React.ReactNode }) {
return (
<section>
<h1>Field notes</h1>
{children}
</section>
)
}Add /notes and a notes layout. Put a tiny client counter in the layout, navigate between two child pages, and compare that with a full reload. The result should make the layout lifecycle concrete.
Lesson completed