What is Next.js and what does it add over React?

Question

Accepted Answer

**Next.js** is a full-stack React **framework**. React itself is just a UI library — it renders components but leaves routing, data fetching, server rendering, and build tooling to you. Next.js provides all of that out of the box, plus a server runtime. ## What React alone leaves out (and Next.js adds) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## A concrete example: a route is just a file ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` In plain React you'd install a router, configure routes, and set up a build. In Next.js, creating the file *is* the route. ## Why teams choose it - **SEO & performance** — server-rendered HTML means content is in the initial response (good for crawlers and fast first paint), unlike a client-only React SPA that ships a blank page then hydrates. - **Full-stack in one project** — frontend and backend (API routes, Server Actions) live together. - **Production-ready defaults** — automatic code splitting, image/font optimization, caching. ## Why it matters Next.js is the most popular React framework because it turns React from a UI library into a complete application platform — handling rendering strategy, routing, data, and a backend so you focus on features instead of plumbing. It's the default choice when you need SEO, performance, or server-side logic with React.