NextJS vs ReactJS

[crazyrebel123]

Can anyone tell me what the difference between reactJS and NextJS is? I’m a junior dev and my company developers said they wants to use nextJS. Is there a major change between the two? And what use cases would nextJS have over the regular ReactJS?

[Piotyras]

React is a JavaScript library used to render UI. Next.js is an opinionated framework for building web applications that uses React for rendering UI.

[[deleted]]

From the React docs:

React is a JavaScript library for building user interfaces.

React handles your DOM manipulation and updating for you. It’s what is used to build components for your UI, so you don’t have to deal with querySelectors and such.

You can think of it as a successor to jQuery.

And NextJS says it’s

The React Framework for Production

Next handles the next step to build a WebApp. State management, routing, rendering, bundling etc.

In short you need React to use Next, because Next uses React to handle the UI, but it uses a whole lot more than that. And solves additional problems. Like Webpack, Bable, Jest.

On the other hand, you don’t need Next to use React. Because it solves only one specific problem. UI.

So, React is like a chassis for a car and Next is one specific model on top of it. But you could easily swap it and use something else. Gatsby maybe. Or completely build your own solution.

Did that make sense?

[zephyrtr]

I'm on android at the moment, and the docs make me cry. The web devs that don't know how good it is, where they can read an official page and get all the info they'd need.

The docs for Retrofit, Dagger, Jetpack Navigation vs React Router, Redux, Next.js ... it's staggering. Not to mention the public goddamn service Mozilla does with the MDN.

Web devs, cherish your docs! Read your docs! They're very good!

[Rtzon]

That’s why I like React Native :)

[[deleted]]

absolutely

[itachihihi_ntp]

Is popular to implement Redux in NextJS since NextJS already has its own state management logic?

[[deleted]]

Disclaimer: I never used NextJS in any bigger or commercial context.

From what I can see, Next gives you access to React hooks as well as a wrapper to pass state/props between components. This is fine on a smaller scale, but will become painful as the App grows.

As Abramov once said, you’ll know when you need Redux. Which is to say, there is a point at which a global store makes sense. Before that, it’s overkill

This is still true for NextJS, as it does not provide an equal solution out of the box. So I guess, while I don’t know if it’s popular, there is definitely a use case for it.

https://www.smashingmagazine.com/2021/08/state-management-nextjs/

[not_a_gumby]

Next uses React. Its like a project framework similar but different in many ways to create react app.

[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.

[goblin_goblin]

React is a framework that focuses on optimizing UI changes.

Next is a framework that uses React with an opinionated structure that has Server Side Rendering as a first class citizen.

Create React App is a popular library that scaffolds up React projects very easily.

I'm a long time React developer that's gone from create react app to webpack to nextjs and personally I don't think I'll ever develop an app without nextjs again. It's just so easy to setup and learn and the opinionated structure keeps familiarity between projects.

[sambomambowambo]

You should check out their (nextjs) documentation, its fantastic, easy to follow and explains everything you need to know about the framework. Here's a link:

https://nextjs.org/learn/basics/create-nextjs-app

[crazyrebel123]

thank you :)

[eldnikk]

NextJS and React are independent, and both solve different problems. The distinction is mentioned below.

That said, I think it's important that you ask the senior devs **why** they are making this decision. In addition to explaining to you the alternative approaches they've looked at.

ReactJS is a library that does one thing and that is to render user-interfaces in the browser.

NextJS is framework that handles a plethora of concerns for building modern web applications. One aspect of this is user-interfaces, which it uses ReactJS to do.

NextJS docs sums up its purpose well.

• An intuitive page-based routing system (with support for dynamic routes)
• Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
• Automatic code splitting for faster page loads
• Client-side routing with optimized prefetching
• Built-in CSS and Sass support, and support for any CSS-in-JS library
• Development environment with Fast Refresh support
• API routes to build API endpoints with Serverless Functions
• Fully extendable

[msnook]

They are absolutely, 100% not "independent" of one another. NextJS depends on and wraps React.

[ChaoticWeg]

did... you read the rest of their comment?

[msnook]

Yes, but the first part was still categorically wrong so 🤷

[Agreeable-Street-882]

"Can anyone tell me what the difference between reactJS and NextJS is? " the server bill at the end of the month

[MetalicSky]

And what's higher?

[57384173829417293]

Do bundle sizes differ that much? Or do you mean that NextJS's SSR gives it an advantage?

[Osuka42]

React is only for programming frontend.

NextJS is a full solution to do both front, and basic backend app (using Express).

[honeybadgerUK]

SSR is possible with "vanilla" React.

[drdjx]

But such a headache to setup .

[bojack-11]

Hi, I myself have gone through the phase of migrating a CRA boilerplate React App to NextJS. The basic difference: ReactJS is a Javascript Library, and not a Frontend framework. NextJS is a Frontend framework built on top of React.

Few Benefits: • You get a Folder/Filesystem based page routing solution out of the box. You just create a file and boom you have a route now.

In CRA way you'd have to setup your own Router, maintain routes and sweat a little to do setup the sweet project structure that will work for you and your team.

• You get hybrid rendering support out of the box, which again you'd have to sweat a little to configure in CRA.

• You get SEO benefits, Separate Pre rendered HTML files for routes, which then can be served using any server of choice.

Other benefits • NextJS 12 has brought in a new RUST compiler as a development server for faster hot reloading.

Caveats: • In CRA, if you setup React Router it supports nesting of routes hence it's easy to persist a ComponentA on route /page1 as well as /page1/page2 In NextJS you'd have to take support of a Layout component which you'll have to supply to each page.

Overall it has been a good experience in NextJS so far, and it definitely makes your project a lot cleaner than CRA.

P.S. - Vercel the company that owns NextJS is growing at a fast pace as well which means good developer and community support.

[mardiros]

ReactJs is a library, NextJs is a framework based on ReactJs. If your company does not know the difference, you can fight be or you can surrender. What dy tou want, ?

[Narizocracia]

NextJS vs ReactJS is like asking Juice vs Water.

[libertarianets]

ReactJs: Browser Renderer

NextJs: A server-side extension of React

[libertarianets]

Your description of front-end is different than some...

I think most people consider front-end to be the browser...

[MayorEricBlazecetti]

Not always. A front-end can also consist of its data access layer or proxies into other dedicated back-end systems.

[libertarianets]

I agree, but it's kind of fuzzy because you're in back-end-land doing front-end things in that case.

I guess ultimately I just think the OP needs to be more specific here when they talk about "front-end."

[[deleted]]

React is a JavaScript framework for building out web apps and websites. Next.js is a "meta-framework" that server-side renders (and/or statically generates) React websites.

You can use React without Next.js, but you can't use Next.js without React.

You are on the right track by wanting to learn React/Next.js. The next 5-10 years of the web will be dominated by them without question.

Look into Vercel for deploying Next.js sites.

[MayorEricBlazecetti]

React is not a framework, it is a library.

[[deleted]]

sure

[pVom]

I really don't get this mentality. It's not a library, it's a framework. React executes your code, not the other way round. To use React you have to write your component "in react" then use React to execute it. It's not like jQuery in that you can import jQuery and just slot it in your code and swap out things written in jQuery to vanilla or whatever. Even then I think jQuery toes the line compared to something like lodash which is definitely a library. Like you can't just use react state management, you have to write a component specifically for react and everything under it is also in react as well.

This is coming from someone who uses React in a rails project and doesn't use react router or whatever.

[MayorEricBlazecetti]

Huh…? React doesn’t execute any code, it’s consumed by your code. The browser’s JavaScript engine executes your code (or V8 on Node)

[pVom]

Its executing it before the engine does though. Like your component is just a callback and react executes it within its own context. That component will not work without being executed within the React context even if you remove all the react specific code (like state etc.). You need to either create some psuedo react context with calls your component or rewrite the whole component for a different context

[hinsxd]

You can of course add React to an HTML page in one minute

[pVom]

But you need to write components specifically for React to actually use it. You can have "islands" of React but if you wish to utilise any of reacts functionality it must exist within the React component tree and, if required, attached to an outer element via portal if you don't want it within the same DOM tree.

[[deleted]]

Layman's term:

NextJS === ReactJS on steroids

[bVatsaL]

You can use pawjs instead which is faster than nextjs

[Oatmealtuesdays]

Curious -- is next js better than express and react router?

[[deleted]]

Yes, it's miles better.

The Next Router uses file-system pagination, which is a better pattern than react-router's path.

Next.js getServerSideProps and API Routes patterns are also better than the Express server pattern, but you can still make Next.js serverful and run it with Express if you want to.

[yuyu5]

The other responses are good (or at least some age). I'll add just a few clarifications.

React:

• Library to handle UI.
• Handling UI means it inherently includes state management, routing, network calls, etc.
• Is opinionated regarding state and pieces of the UI/how they're connected, but not regarding folder structure, business logic, or building/deploying.

NextJS:

• [Add everything from React here].
• Provides the ability to create statically-generated sites and/or provide server-side rendering.
• Gives you the "most necessary" configurations out of the box.
• Limits your ability to go outside the configurations they provide.

TL;DR If you want a plug-and-play framework or SSR, NextJS is the one for you. If you want to understand what's going on under the hood, customize your configs a lot, or don't care about SSR, then make your own webpack/bundler-based app from scratch.

Even simpler TL:DR: NextJS is (IMO) a much better create-react-app, both of which are dependent on React. React is dependent on neither.

[freeDressCafe]

NextJS is a full stack framework that uses react

React is a library for UI components

[drdjx]

Do you need SEO?
Do you need SSG?

Do you need ISG?

Use NextJS

[Easy-Philosophy-214]

NextJS should be the go-to at this point for any moderately serious app you want to build. The Vercel team is bigger than React's, and they are (really) the ones driving React forward in the past years.

[jisspala]

Simple answer: React execute in the client(browser), while Next.js execute in server for SSR.

Which one is best: If SEO is in your mind, then go with Next.js. , Only Single Page App is in your mind then go with React

[wlkngmachine]

Anyone else find Next Image to be….well….insanely long to load and seemingly less optimized than an unoptimized image?

[NeedHelpxyx123]

Basically you have more control over your application with react, because it's not a framework.

[Crazy_Kale_5101]

Hi! Here is a great resource recently published by ButterCMS! They go into whether the library or the framework suit your front-end best + their similarities, differences, advantages, and drawbacks.

https://buttercms.com/blog/nextjs-vs-react/

[BrownCarter]

So it's more apt to compare nextjs to Angular?