Next.js vs React

React and Next.js are two of the most popular tools for frontend development. But how can you choose which one to use? We will briefly discuss the differences and similarities between React and Next.js, and why you might choose one over the other.

First main difference between React and Next.js is that React is JavaScript library, and Next.js is framework for React. That means and React can work without Next.js, but Next.js needs and uses React to build pages. 

The next, and probably the biggest difference between React and Next.js is that React uses Client-Side Rendering, and Next.js Server-Side Rendering.

What that means is that in React application you make a request for a single HTML file, that has a reference to all JavaScript files that have your code, and once everything is fetched and all the data is ready, the browser will compile everything, and the page will render with all of it’s content.

Next.js on the other hand uses Server-Side Rendering, which means that HTML pages are fully rendered on the server, and then delivered to the browser ready to display. 

So from performance standpoint, because Next.js uses Server-Side Rendering, it has an advantage over React.

Routing in React is done by using react-router library.

And code might looks something like this:

 

This way, router is created for every component, and path and component are passed as props. 

Next.js doesn’t require any third-party library. It also doesn’t need do create routes with paths. It uses its own file based router. For every page that you want to create you add JavaScript file in pages folder. So, if you add a file “about.js” in pages folder you can to go route /about to render that page. You can also add subfolders so, if you add folder named blog in pages folder, and then, in blog folder, add file “about.js”, you can render it by going to /blog/about.

This way of implementing routing means less code, cleaner code, and you don’t have to depend on external library.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Next.js gives us two ways of fetching data. Two pre-render functions: 

  • getStaticProps – for static generation, the data required to render the page is available at build time
  • getServerSideProps – when the data is changing, when you request this page directly, getServerSideProps runs at request time, and this page will be pre-rendered with the returned props

Since Next.js is newer then React, community is smaller, but it’s growing. React community is large and strong, and because of that, and the fact that it has been around for longer, documentation is better and there are more resources. Next.js is in the lead when we talk about features, since it’s built on top of React, so it has all the features that React has, and then some. 

So, all in all, which one is better. It usually comes down to personal preference, and what type of application are you trying to build. Next.js is faster, but React is more beginner friendly.