BYD TechThe short answer
React is a library for building user interfaces out of components. Next.js is a framework built on top of React that adds what a full website or app needs: routing, rendering on the server or ahead of time, data loading and a build setup. You do not choose one instead of the other. Next.js uses React. The React team itself recommends starting new apps with a framework such as Next.js.
Key points
- React: components and interface. Next.js: React plus everything around it.
- Next.js renders pages on the server or ahead of time, which helps speed and SEO.
- The React docs recommend starting new projects with a framework.
- Plain React with a build tool suits apps behind a login that need no SEO.
- For mobile, the React-based framework is Expo.
Side by side
| React | Next.js | |
|---|---|---|
| What it is | A library for building interfaces | A framework built on React |
| Routing | Add a library | Built in, from the folder structure |
| Rendering | In the browser, unless you add more | Server, ahead of time, or browser, per page |
| Data loading | Your choice of approach | Built-in patterns |
| SEO | Harder for content in the browser only | Pages arrive as finished HTML |
| Back-end code | Separate | Can live in the same project |
What React is
React, created at Facebook and now open source, lets developers build an interface from small reusable components. It is deliberately focused: it handles what the user sees and how it updates, and leaves routing, data loading and building to other tools.
What Next.js adds
- Routing: each folder becomes a page address.
- Rendering choices: pages can be built ahead of time, rendered on the server per request, or in the browser.
- Data loading on the server, close to the database.
- Images, fonts and scripts optimized by default.
- Server code in the same project, for forms and APIs.
The React documentation now recommends starting a new app with a framework, listing Next.js, React Router and, for native apps, Expo.
When to use which
- A website, a marketing site or anything that must be found in search: Next.js.
- A SaaS product with public pages and a logged-in app: Next.js, one codebase for both.
- An internal tool behind a login with no SEO needs: plain React with a build tool such as Vite is fine.
- A mobile app: React Native, usually through Expo. See Expo vs React Native CLI.
Comparing frameworks for a content site is a different question, covered in Next.js vs WordPress. Fast, search-friendly sites on Next.js are what we build in website development.
Sources
Checked when this guide was written.
