What is Next.js and how does it differ from React?

Question

Accepted Answer

Next.js is a production framework built on top of React, maintained by Vercel. React by itself is just a UI library — it renders components and manages state, but everything around that (routing, data fetching, build tooling, server rendering, deployment) you have to assemble yourself. The core difference: React gives you a renderer, Next.js gives you a complete application architecture. What Next.js adds on top of React: File-system routing — pages or routes are just files in a directory. No react-router setup. Server-side rendering and static generation — pages can render on the server (SSR), at build time (SSG), or stream from the server. React alone is client-side only. Server Components and Server Actions — in the App Router, components can run on the server with direct database access, no API layer needed. Built-in bundling and optimization — Webpack/Turbopack config, code splitting, tree shaking, and image optimization out of the box. API routes — backend endpoints colocated with your frontend code, deployed as serverless functions. Image, font, and script components — automatic optimization, lazy loading, and CLS prevention. Middleware — request-time logic for auth, redirects, A/B tests, running at the edge. Don't just say 'Next.js is a React framework.' Explain the key distinction: React is a library (you choose the architecture), Next.js is a framework (it provides the architecture). Mention specific features like SSR, file-based routing, and API routes that React lacks.