What is Next.js (and Why)
Understand what Next.js adds on top of React — routing, project structure, bundling, and server rendering — and why real teams reach for it.
Step 1 of 2
React is a library, not a whole app
In the React module you built real, interactive UI — but everything lived in one HTML file loaded from a CDN. The moment you try to build a real website, gaps appear that React alone doesn't fill:
- Routing — React has no built-in concept of pages or URLs. How does
/aboutshow different content from/contact? - Project structure — where do components, pages, and styles live? React doesn't say.
- Bundling & tooling — turning your JSX into fast, optimized files for the browser.
- Server rendering — sending ready-made HTML so the page appears instantly and search engines can read it, instead of a blank page that fills in later.
Next.js is a framework built on top of React that answers all of these — with sensible defaults — so you can focus on building features instead of wiring up tools.
Think of it this way: React is an engine; Next.js is the whole car built around it — chassis, wheels, steering, dashboard. You could bolt your own car around an engine, but most people want to just drive. Next.js gives React a body so you can ship a real product.
Web Standard
Next.js is still React — same components, JSX, props, state, and hooks you already learned. It doesn't replace React; it surrounds it with the structure and tooling a production site needs.
Learn more on MDN