What is Next.js and how does it differ from React?
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-routersetup.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.