Layouts and Nested Layouts
Share UI across pages with layouts, and give one section of your site its own wrapper with a nested layout — all through the children prop.
One layout, shared by every page
A navigation bar shouldn't be copy-pasted into every page. That's what layout.js is for: UI that wraps its pages. You already have the root layout (app/layout.js) — put your site-wide header and nav there, and every page gets them automatically.
A layout is a component that receives a children prop and renders it. children is "whatever page is currently being shown." Put your shared header above {children} and a footer below it, and the page slots into the middle.
{children} is the photo. The frame stays on the wall while you swap photos in and out. Navigating between pages swaps the photo without rebuilding the frame.When you navigate between pages that share a layout, the layout doesn't re-render — a video keeps playing, a sidebar keeps its scroll position, an open menu stays open. Only the {children} part changes. This is a big usability win you get for free.