Lesson 9 — List rendering

A navigation bar from data

Menus are lists too. Keep the items in an array of objects and map each one to a link. In a real Next.js app you would use the <Link href="/docs"> component from next/link (it changes pages without a full reload); here we use a plain <a> so the preview works.

{links.map((l) => <a key={l.url} href={l.url}>{l.text}</a>)}

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: adding a menu item becomes one line of data instead of new HTML.