What is the difference between React and Next.js?

React is a JavaScript library for building user interfaces. Next.js is a framework that wraps React and adds routing, server-side rendering, static generation, and performance optimisation. Every Next.js application is a React application; the two are complementary, not competing.

What React does

React focuses on one thing: rendering user interfaces through reusable components. It manages state, handles events, and updates the DOM efficiently. On its own, React renders everything in the browser. The server sends a minimal HTML file and a JavaScript bundle; React then builds the interface client-side.

This works well for interactive tools, dashboards, and applications behind authentication where search engine visibility is not a concern. React does not include routing, data fetching conventions, or a build pipeline out of the box, so developers assemble those separately using libraries such as React Router, React Query, or a bundler of their choice.

For mobile, React Native shares React's component model but targets iOS and Android rather than the browser. It is a separate runtime from web-based React or Next.js. See pros and cons of React Native for mobile development for a fuller comparison.

What Next.js adds

Next.js keeps all of React's capabilities and layers a complete framework on top. The main additions are:

File-based routing. A component file placed in the pages (or app) directory becomes a route automatically. An about.js file creates /about. Custom routing logic is still possible, but the common case requires no configuration.

Multiple rendering strategies. Where plain React always renders client-side, Next.js lets you choose per page: - Server-side rendering (SSR) generates the page on each request, ensuring users see fresh data. - Static site generation (SSG) produces HTML at build time, ideal for content that changes infrequently. - Client-side rendering remains available where appropriate.

You still write standard React components with hooks, props, and context. Next.js decides where and when those components run.

Built-in optimisations. Next.js automatically splits code by route so users download only what the current page needs. It optimises images, serves modern formats, and prevents font-related layout shifts. React's own tools such as React.memo and useMemo continue to work alongside these framework-level optimisations.

SEO. Because server-rendered and statically generated pages arrive at the browser fully formed, search engine crawlers can index content without executing JavaScript. For content-heavy sites such as blogs, documentation, or e-commerce, this is a significant practical difference from a purely client-side React setup.

Routing compared

React itself imposes no routing structure, which gives complete flexibility but requires deliberate choices. Next.js provides routing as a first-class feature. The two approaches suit different situations:

Developer experience

Starting a plain React project means selecting and configuring a bundler, development server, and supporting libraries. That flexibility is valuable under specific constraints.

npx create-next-app produces a React application with routing, a development server, and optimisation tooling already configured. The trade-off is that Next.js makes structural decisions for you. For most new projects that need a web application with public pages, that trade-off saves significant setup time.

Third-party React libraries work identically in both contexts. React Query, for example, behaves the same whether the project uses Next.js or React alone.

Which to choose

Learn React first if you are new to both. Components, props, state, effects, and context are the same in every React environment, and understanding them makes Next.js easier to reason about.

Start with Next.js if you already know you need server-side rendering, static generation, or file-based routing. You will learn React inside a structured environment that handles production concerns from the start.

The question is not React versus Next.js. It is whether your project needs what Next.js adds on top of React. For a difference between React and Next.js summary focused on architecture, that entry covers the rendering model in more depth.

In an AI-native team

Coding agents generate Next.js scaffolding, routing structures, and data-fetching patterns quickly, but they frequently conflate the Pages Router and App Router conventions or apply outdated patterns from older Next.js versions. Engineers working with agents need to verify that generated server components, client components, and caching configurations match the project's actual Next.js version and architecture. Reviewing AI-generated code carefully is especially important here because rendering-strategy mistakes are not always obvious from test output alone.

What we test for

We assess React and Next.js knowledge across two sessions described in how we vet: a fundamentals assessment without AI tools, where engineers reason through component lifecycle, rendering strategy, and routing without assistance, and an AI-native assessment where they use coding agents and must catch errors in generated Next.js code they did not write themselves. We verify that candidates can read and critically evaluate agent output, not just prompt their way to a result.

Short answers