Next.js vs React: What the Framework Actually Adds

React is a JavaScript library for building user interfaces. Next.js is a framework built on top of React, so the Next.js vs React question comes down to what the framework adds: routing, server-side rendering, data fetching, API endpoints, and a configured build. You write the same components in both, but Next.js gives them a place to live and run.

Here is a page in a Next.js app that reads data on the server:

App.tsx

// app/blog/page.tsx
export default async function BlogPage() {
  const res = await fetch('https://api.vercel.app/blog');
  const posts = await res.json();
  return <ul>{posts.map((post) => <li key={post.id}>{post.title}</li>)}</ul>;
}

In plain React, that fetch would run in the browser, usually inside useEffect. In Next.js the page is a server component, so the request runs on the server and the browser receives finished HTML. Server components are a React feature, and Next.js is the framework that makes them work end to end.

What React handles on its own

React's job is the view layer. It gives you components that describe the interface as functions, state and effects for interactivity, and a declarative model where you describe the result and React updates the DOM.

What React deliberately leaves out is everything around the interface: how the page is reached, how it renders on the server, and how data gets into it. You fill those gaps with a router, a bundler, and a server, or you use a framework.

What Next.js adds

Next.js keeps the React component model and supplies the surrounding machinery.

Each row is a feature you would otherwise assemble and maintain yourself. The framework also adds image and font optimization, API endpoints through route handlers, and metadata support for search engines.

Which one should you use

Choose React when the interface is the whole problem: a widget, a client-only single-page app, or a component embedded in an existing site.

Choose Next.js when the application also needs server-side rendering, routing, a backend, or a production build. Most multi-page web apps fall into this second group, which is why Next.js is a common starting point for new projects.

If you want the broader picture first, read What Is Next.js and When Should You Use It?. To see the framework in action, follow the Next.js App Router tutorial.