What Is Next.js?
React is a library. Next.js is the framework that makes it production-ready.
React lets you build UIs from components. What React does not give you: a router, a way to run server code, a build system, or a deployment story. Next.js provides all of that — it is the production-grade framework built on top of React that the vast majority of serious React projects use.
React is an engine. Next.js is the car.
A car engine makes movement possible — but you still need a chassis, wheels, steering, and somewhere to go. React is the engine: powerful, but missing the surrounding system. Next.js is the complete car — router, server, build system, deployment integration, and conventions for how everything fits together.
What Next.js adds to React
- File-based routing — Create a file at app/about/page.tsx and /about works automatically. No router config.
- Server Components — Components that run on the server — fetch data directly, no client-side loading spinners.
- API Routes — app/api/users/route.ts becomes an API endpoint. Backend and frontend in one project.
- SSR, SSG, and ISR — Server-side rendering, static generation, and incremental regeneration — all configurable per page.
- Image and font optimisation — Built-in next/image and next/font with automatic lazy loading and web font optimisation.
- One-click Vercel deployment — Push to GitHub, deploy to Vercel in seconds. Serverless functions, edge CDN, preview URLs — all automatic.
App Router vs Pages Router
Next.js 13 introduced the App Router — a new way of structuring your application using the app/ directory. This course uses the App Router exclusively (the current recommendation for all new projects). If you see older tutorials using pages/ directory, they are using the legacy Pages Router — still supported but not the path for new projects.
This course uses Next.js 15 with the App Router
Everything here reflects current Next.js conventions. When reading older tutorials, the biggest gotcha is that data fetching, layouts, and routing work differently between App Router and Pages Router.