Lesson 13 — Data shaping

Shape the data before showing it

A Next.js page usually fetches data (from an API or database) and then prepares it: keep only what should be shown, sort it, pick the fields the page needs. With filter, sort and map this preparation is a short chain.

products.filter((p) => p.inStock).map((p) => p.name)

Note: the real Next.js router runs on a server and cannot run in this browser playground, so the exercise is a small plain-JS simulation of what Next.js does. The array below stands in for the fetched data.

Why it matters: clean, small data in means simple components out.