Why Next.js
You have learned React and want to build Trailhead, a guide to local hiking trails: a home page, a list of trails, a page for each trail and a small API for a phone app. React will happily draw every one of those screens. But the moment you ask "how does /trails/misty-ridge find the right component?" or "how does Google read this page?", React has no answer. That gap is why Next.js exists.
The rule
React draws the parts; Next.js builds the house around them.
React is a library. It does one job very well: turning data into components and keeping the screen up to date. Everything around that job is left to you:
- Routing: which component shows for which URL.
- Data loading: where and when the trail list is fetched.
- Rendering on the server: sending real HTML instead of an empty page.
- Building: bundling, splitting and minifying the code for production.
- Backend endpoints: somewhere to answer
GET /api/trails.
Next.js is a framework built on React. It makes those decisions for you and turns them into conventions. The best-known one: a folder is a URL.
app/page.tsx # the page at /
app/trails/page.tsx # the page at /trails
app/trails/[slug]/page.tsx # every page like /trails/misty-ridgeYou still write ordinary React components. Next.js decides when they run, where they run, and how the result reaches the browser.
A library is something your code calls. A framework is something that calls your code: you put a file in the right place with the right name, and Next.js picks it up.
The shortcut
When you meet a new feature, ask "Is this drawing, or is this plumbing?" Drawing a card, a button or a list is React. Plumbing (URLs, data, HTML delivery, builds, APIs) is what Next.js supplies.
A trail card with a photo and distance
Drawing. A React component,
TrailCard, with props.
The trap is thinking Next.js replaces React. It does not. Every page you write in Next.js is a React component; the framework just gives it a home.
Drills
Answer fast — trust the rule.
Which job does React itself handle, without a framework?
What is the key difference between a library and a framework?
In Next.js, what creates the page at /trails?
Trailhead wants a star-rating widget. Which part of the stack is that mainly about?
Remember
- React draws the parts; Next.js builds the house: routing, data, server HTML, builds and APIs.
- Shortcut: ask "drawing or plumbing?" to know whose job it is.
- Trap: Next.js does not replace React; every page is still a React component.