Key takeaways
- React builds user interfaces; Next.js is a full framework built on React.
- Next.js adds file-based routing, server rendering, image and font optimisation and SEO features out of the box.
- For public websites that need to rank, Next.js (or another server-rendering framework) is usually the better base.
- For apps behind a login, plain React with Vite can be simpler and enough.
- React's own docs recommend starting new projects with a framework.
"React or Next.js?" is a slightly odd question, because Next.js is built on React. Every Next.js app is a React app. The real question is whether you need the extra features Next.js adds — and for most public websites, you do.
What React is
React is a JavaScript library for building user interfaces from reusable components. It handles what appears on screen and how it updates, but leaves routing, data fetching, rendering on the server and build tooling to you or to other libraries. A plain React app is usually built with Vite and rendered entirely in the browser.
What Next.js adds
- Routing: Pages and layouts are defined by folders, with nested layouts and loading states.
- Server rendering: Pages can render on the server, ahead of time or on demand, so visitors and search engines get complete HTML.
- Server Components: Components can run on the server, fetching data directly and sending less JavaScript to the browser.
- Built-in optimisation: Images, fonts and scripts are optimised automatically.
- SEO features: Metadata, sitemaps, robots rules and structured data are first-class.
- Back-end code: Route handlers and server actions let the same project handle forms and APIs.
SEO and performance
A React app rendered only in the browser sends an almost empty page first and builds it with JavaScript. Google can render JavaScript, but it is slower to index and other crawlers and AI tools may not. Next.js sends complete HTML, which loads faster for visitors and is easier for every crawler to read. For pages that need to rank, that is a decisive advantage.
When plain React is enough
- Internal tools and dashboards behind a login, where SEO doesn't matter.
- Embedded widgets that live inside another site.
- Teams that already have a separate back end and want a simple front end.
When to choose Next.js
- Marketing sites, blogs and ecommerce storefronts that need to rank.
- Products that mix public pages with logged-in features.
- Projects where fast first loads matter on mobile.
Other React frameworks
Next.js isn't the only option. React Router in framework mode (the successor to Remix) is excellent for data-driven apps, and it powers Shopify's Hydrogen. Astro suits content-heavy sites with little interactivity. Our comparison of Hydrogen and Next.js covers the choice for headless Shopify.
Frequently asked questions
Should I learn React before Next.js?
Yes. Next.js is built on React, so React's components, props, state and hooks come first.
Is Next.js good for large applications?
Yes. Next.js is used for large production apps, with server rendering, caching and back-end code in one project.
Can I move a React app to Next.js?
Yes, usually step by step: components carry over, while routing and data fetching move to Next.js conventions.
Our React development and Next.js development teams build with all of these, and will recommend the one that fits your product.
Filed under
Jay Patel