ReactNext.jsServer RenderingRoutingjunior level

React and Next.js Solve Different Layers

the question

What is the difference between React and Next.js, and when would you choose one setup over the other?

what they're testing: The interviewer is checking whether you can separate a UI library from the application framework and reason about the trade-offs that framework adds.

a strong answer

React is a library for building component-based user interfaces. Next.js is a React framework: it uses React and adds application-level features such as file-system routing, build tooling, rendering options, and server endpoints. It does not replace React.

Without a full-stack framework, you choose a React build tool, router, data-fetching approach, and hosting setup yourself. In the Next.js App Router, app/products/page.tsx defines the /products page, and a route.ts file defines an HTTP request handler for its route. Pages and layouts are Server Components by default. Use Client Components for state, event handlers, effects, and browser APIs. On the initial load, Next.js can prerender their HTML and React hydrates them in the browser.

Choose based on the application, not on which name is more popular. A client-heavy dashboard with an existing backend may be simpler with React, a build tool, and a router. Next.js is a strong fit when the product benefits from integrated routing, server-side data access, streaming, or backend-for-frontend endpoints. Next.js can also support client-rendered and statically exported applications, so choosing it does not mean every page is rendered by a server at request time.

Where people slip

the tempting wrong answer, and what's actually true

Next.js is an alternative to React, so a project chooses one or the other.
Next.js is a React framework, so a Next.js application uses React components rather than replacing React.
React only renders in the browser, while Next.js always renders on the server.
React can render on the server when a framework provides that setup. Next.js supports Server and Client Components, client-side rendering, and static export, so it does not always render every page on a server at request time.
React includes routing, so Next.js routing is only a different syntax for the same built-in feature.
React focuses on user interfaces, while Next.js supplies a file-system router as part of the framework.

If they push further

When would you choose React with a build tool instead of Next.js?

Choose the smaller setup when the product is mainly client-side, already has a backend, and does not need Next.js rendering or routing conventions. The decision should follow product and deployment needs, not framework popularity.

How do Server and Client Components differ in the Next.js App Router?

Pages and layouts are Server Components by default; use Client Components for state, event handlers, effects, and browser APIs. Keep the client boundary narrow to avoid sending unnecessary JavaScript.

What does hydration mean in a Next.js page?

On the initial load, the browser receives prerendered HTML for the route. React then hydrates Client Components by attaching event handlers to the existing DOM so the application becomes interactive.

Sources

Now answer it yourself.

Reading a strong answer is easy. Producing one under pressure is the skill the interview tests. Gapmap grades your answer against the same bar an interviewer would.

was this useful?

beta

The interviewer part is in the works.

The diagnostic, personal maps, and AI mock interviews are being finished right now. The notes stay free either way. Leave an email and you'll get the first-cohort invite, plus a month of Pro when it opens.