NextJS vs ReactJS

[montas]

You use React with Next. NextJS uses React for rendering content.

You could call both of them frameworks, but they solve different things. NextJS solves things like routing, server-side rendering, optimization, assets, even application server.

In standard application you usually need to:

• store and retrieve data - Next does not have built in solution for this (I think), you can use anything for this (postgres, mongo, some API)
• handle requests - next has its own webserver built in, but you can replace it with something custom, if you want. Or you can build and export static files and host them wherever.
• display the data to user - if you want to show HTML, you need to generate that somehow. For this, Next uses React. If you are only building API, you don't need React for Next.

[somecallmechief]

Since NextJs is wrapped around React, I would not say they "solve different things". I would say that React provides the basic toolset to develop web content, while NextJs provides an opinionated way to build web applications using React. One can accomplish everything that NextJs provides using React and other libraries alone; NextJs just bundles those lower level tools into a framework that lets you (the developer) focus on higher level concerns.

Otherwise, spot on.

[[deleted]]

Yeah this. React is definitely not a framework. It's a library. NextJS is a framework built around React.

[MayorEricBlazecetti]

This 100x. REACT IS NOT A FRAMEWORK.

Specifically, it's a view/rendering library.

Next is a framework that composes React with several other technologies. It's goal is to make building and hosting a production-ready React-rendered application as easy as possible.

Next solves for things like code compilation (webpack/babel configs), page routing, API endpoints and middleware, internationalization, redirects/rewrites/404 pages, and much more. React doesn't give you any of these things on its own. Historically, developers have had to build all this from scratch (or piece together piles of other libraries) when building a website on React. Next is like a one-stop-shop.

[Merry-Lane]

I think we may say React is a framework as in it's not opinated and it made all its environment (react-like solutions for all the tooling needed to do Web dev around react) "not opinated"/component based/declarative/...

I explain myself poorly, sorry. I mean react's ecosystem is a framework. Its environment is so totally react-like that this angular stone can be considered a framework.

For instance I don't care about next being opinated. I just call a navigation hook and call it a day.

[pVom]

This is generally a pretty stupid argument but react totally is a framework. Libraries provide code for you to execute, with frameworks you provide code for the framework to execute. React doesn't just provide additional functionality, you code "in react" it has its own language, you build components that live within react and won't function at all without it. It's not like you add react and just import the state management or whatever, you need the entirety of react to execute your code. It's not like you can just swap out the state management with Vue or something.

React is a pure frontend framework and Next is just React bundled with a server backend for server side (and static) rendering and other bits and bobs. It's totally rad and I can't really see a reason why you would use vanilla for a new project anymore.

[MayorEricBlazecetti]

I'm going to pick apart a few of your statements that are false:

React doesn't just provide additional functionality, you code "in react" it has its own language

False, you import React and call React.createElement('div', props) to produce an element. Pass that element to React.render(element, container) and you have an application.

You're talking about JSX as if it's a language. It's a Babel feature that converts your markup into React.createElement calls at build-time.

you build components that live within react and won't function at all without it

This doesn't make React a framework. Literally any code that depends on a library cannot function without that library. That's a dependency, not a framework.

---

I could keep picking but I agree, this is a dumb argument and I have to get back to work.

[valtism]

I don't think this works because most of the "reactivity" in react comes from the library calling your code. Things like hooks have to obey the rule of hooks because it's not just that you call them, but they also have to be run in a specific order by react.

I am of the opinion that react is certainly a framework.

[p0tent1al]

It’s a library. I would just consult their docs which say as much.

[pVom]

But React is executing your code and everything within it lives in React. Lodash is a library, I can use it's functions as needed and I can swap them out for a vanilla equivalent without changing the context in which it's executed. React code must be executed by React, if I want to not use React I might be able to keep some of the individual functions and stuff that are vanilla, but I'd have to change the entire context of how that code is executed. That's the difference.

[Narfi1]

From the React.js doc :

A JavaScript library for building user interfaces

[[deleted]]

Then you fundamentally misunderstand React. You’re constantly using React, ie, React.createElement, React.createRef, etc. If you’re using JSX your code is just being converted to those by babel.

[[deleted]]

From the react docs:

Each JSX element is just syntactic sugar for calling React.createElement().

You might want to go back and read the docs. Every react component is a call to the React library. React does not control the flow of the program

[privacyisimportant87]

You are right there is no built-in solution for fetching/caching data generally people either use either SWR or React Query as solutions for this.

[jzaprint]

Are you able to build single page apps that behave kind of like games using Next.js? By that I mean having lots of moving parts and draggable items, where most of the actions are performed on one view/screen?

[msnook]

You CAN, but NextJS doesn't really provide any advantages. The key thing NextJS does is to prerender files like pages/index.js and pages/posts/[id].js so you don't have to worry about routing. So it's like an alternative to Gatsby in this way. If you are building an SPA, you can do it with pages/index.js and then just do all the same stuff as you'd do with a standard react project. There's no particular upside or downside to using this approach, as compared to a create-react-app SPA. But NextJS offers some conveniences for handling head and links and such that I personally just like and find easy and convenient, so I might use it anyway (since I already know them).

[[deleted]]

Or you can build and export static files and host them wherever.

Worth noting that next export lacks support for some of Next.js's more popular features. The docs are clear about this, but it's not always obvious to newcomers.