What is the difference between React and Next.js?

React is a library for building user interfaces from components and state. Next.js is a framework built on React that adds routing, server rendering, data fetching, caching, image and font optimisation, and deployment conventions.

Yes. React works with other frameworks such as React Router or TanStack Start, or as a client-side single-page app built with Vite. Next.js is one popular way to use React, not a requirement.

For SEO-friendly server rendering, file-based routing, Server Components, built-in caching, API routes, image and font optimisation and smooth deployment, without assembling these pieces yourself.

React has no router; you add one such as React Router or TanStack Router. Next.js has the App Router: folders and page.tsx files define routes, with layouts, loading and error files.

A plain React app built with Vite renders in the browser after JavaScript loads. Next.js renders on the server by default with Server Components, sending HTML first and hydrating interactive parts.

Server Components are a React feature for components that render on the server and send no JavaScript. React defines them, but you need a framework such as Next.js to run them with bundling and routing.

In plain React, data is often fetched in effects or with TanStack Query after the page loads. In Next.js, async Server Components fetch on the server, with use cache for caching and streaming with Suspense.

React 19 supports Actions and useActionState for async transitions. Next.js adds Server Actions marked 'use server', so forms can call server code directly and revalidate cached data.

Client-rendered React sends little HTML at first, which is weaker for crawlers and link previews. Next.js sends full HTML, metadata, sitemaps and structured data from the server.

Automatic code splitting by route, image optimisation with next/image, font optimisation with next/font, prefetching links, Partial Prerendering and caching of server work.