Lesson 8 — Passing props deep

Passing props down the tree

Components form a tree: App contains Layout, Layout contains Header. Data flows down — a parent passes props to its children. If Header needs the site title, every component between App and Header must pass it on.

function Page({ user }) { return <Avatar user={user} />; }

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: clear, explicit props make it obvious where every value on screen comes from.