React or Next.js: what Next.js adds and when you need it
Next.js is React plus decisions already made. Sometimes those decisions are what you need and sometimes they are in your way.
The comparison is slightly misleading as usually stated, because Next.js is React. It is React with a set of decisions already made: how routing works, how pages render, how data is fetched, how the build is produced. The question is not which library is better, it is whether you want those decisions made for you.
What plain React gives you
A component library and nothing else. You choose the router, the build tooling, the data fetching approach and the deployment target. That is genuine flexibility and genuine work, and by default it produces a client-rendered app: the browser downloads JavaScript, runs it, and then content appears.
What Next.js adds
- Server rendering and static generation. HTML arrives with content already in it, rather than an empty div that JavaScript fills.
- File-based routing. The folder structure is the route structure. Less configuration, less to get wrong.
- Image and font handling. Optimisation that you would otherwise assemble yourself.
- API routes. Backend endpoints in the same project, which removes a deployment for a lot of applications.
- Sensible build output. Code splitting and asset optimisation without configuring a bundler.
The SEO difference, stated accurately
This is the most common reason people move and it is worth being precise, because the usual claim is overstated. Google does execute JavaScript and does index client-rendered content. "React is bad for SEO" is not accurate.
What is accurate: server-rendered HTML is indexed more reliably and sooner, it does not depend on the crawler successfully executing your bundle, and it produces better Core Web Vitals because content is painted without waiting for JavaScript. For a content site those advantages compound. For an internal dashboard nobody will ever search for, they are worth nothing.
| Project type | Reasonable choice | Why |
|---|---|---|
| Marketing or content site | Next.js | Search visibility and load speed are the product |
| E-commerce | Next.js | Product pages must be indexed and fast |
| Internal dashboard | Plain React | Nothing needs indexing; SSR adds complexity |
| Widget embedded elsewhere | Plain React | You need a bundle, not a framework |
| App with SEO and logged-in areas | Next.js | Handles both rendering modes in one codebase |
The honest summary: if anything on the site needs to be found in search, Next.js is the lower-effort path to that outcome. If nothing does, the framework is solving a problem you do not have.
The real cost of Next.js
More concepts. Server components, client components, and the boundary between them is where most confusion lives. Knowing whether code runs on the server or in the browser stops being obvious, and that catches out developers who learned React in the browser only.
It is also a faster-moving target. Conventions change between major versions, and code written against an older version can need real changes rather than a version bump.
What to learn first
React, clearly. Next.js assumes you already understand components, state and effects, and learning both simultaneously means you cannot tell which layer a problem belongs to. That confusion is expensive and avoidable.
Learn React until you can build a small interactive app, then add Next.js. Code With Squad sequences it that way for exactly this reason, and CodeAiMan's web development team builds production work in Next.js, React and TypeScript, which is the same stack most people end up on.
Frequently asked questions
Referenced in this article
Web development
Custom websites and web apps in React, Next.js and TypeScript, including PWAs and API work.
OpenCWS (Code With Squad)
Coding education platform with courses, an in-browser code playground and one-to-one mentorship.
OpenCodeAiMan
AI-first web, app and software development company based in Ahmedabad, working with clients across India and internationally.
OpenSEO and digital marketing
Technical SEO, content strategy, analytics and performance optimisation.
OpenMore guides on performance, SEO, AI and engineering are on the tech blog index, and the free tools section covers the browser utilities that come up in this work.
All tech articles