Next.js vs React: Which Should You Use?

React is a tool to build front ends. Next.js serves the same purpose. However, both the tools offer a slightly different set of features. More precisely, Next.js gives you more than just a response. But that doesn’t mean you should choose it every time.

See also Why I use Next.js in my projects.

Difference between Next.js and React: Next.js gives you more features

Benefits of React.js

If you don’t know what React is, it is a tool that simplifies the development of web pages. It allows you to create components (thus, separating your pages and UI elements into convenient parts) using a beneficiary markup (JSX).

Angular and Vue work similarly with some implementation differences. However, these tools facilitate us in developing the web.

With React, it’s easy to start a project (use create-react-app), and we have a bundler and a compiler. The next step is to run the app with a single command. “We got it. It’s easy, okay, okay!”

To compare React and NeXT.js, let’s take a look at what NeXT allows us to do.

Next.js benefits

a satisfactory tl; Doctor Will happen: ” Next.js is React but with more features.Next is a framework that uses React. React is a library that gives you the pros you read above, but it also gives you the freedom of choice. You can use a different compiler or bundler, or you You can use it in react-native platforms. Plus, you choose your own set of tools: a routing system, a scss compiler (if you need scss over css), and so on.

Next.js gives you feedback but with a better developer experience. You don’t need to waste time making a choice. But of course you can if you want.

Let’s look at the specific benefits of Next over React.

Next.js saves you time, whereas React gives more options, which you may not need

Way

Why care: You don’t have to spend time choosing a router. There are many routers out there for React, and you might not know the best fit for your situation.

Next is the router built-in. All you have to do is enter your pages src/pages folder. So, “contact.tsx”(tsx is a JSX with TypeScript) the file will be available as a page at “yourAppAddress/contact”. There is also dynamic route support.

static page generation

Why care: If you need static pages for your app (for example, a landing page that leads to the app), and you don’t want to make them dynamic (due to performance), you’ll need a server which will serve HTML pages other than your React app.

You can generate static pages with Next.js as it has a built-in server.

Why care: Same as above, except you want to create a page on each request.

Static generation outputs HTML that will be reused on each request, The server-side rendering method will generate HTML on each request. The former is recommended due to better performance.

data fetching

Why care: If you want to fetch CORS dropping data or get data from a database or read files directly from your app, you’ll need a server.

Next.js data-fetching methods let you do all that without configuring the server. For example, you can generate a static page using fetch of local files at build time. Or, you can request a third-party server except CORS because Next has an intermediary – an API server.

image optimization

Why care: You don’t have to think about image optimization. ie, how to reduce the size of the image, what format to choose, and how to lazy-load the images.

There are usually two obvious problems with images:

  1. image size. That is, reducing 3MB JPG to 40KB webapp.
  2. Loading them after the page is rendered to reduce network load.

Next fixes these problems for the developer, so they can think about other parts of the app. all images inside that use next/image will be optimized and lazy loaded. Also, you can set the loading priority for each of them.

It uses SWC

Why care: You need fast build times.

Next uses SWC, which according to their claim, ” 20 times faster than babel on the same thread and 70x faster on four cores”. Such a speed is a good increase in construction time and during “hot” reloading.

Built-in ESlint

Why care: You take the time to configure ESlint.

Imagine you wrote a few lines of code and there are already lint issues warnings.

built-in typescript support

Why care: You want to write in TypeScript, but it takes some time to configure.

This feature is a huge dealbreaker for me because it takes time to configure TypeScript. Sometimes it’s just installing packages (npm install typescript), and adding the original tsconfig.json, Still, you need to configure it correctly according to your project requirements. Since you have different files (stylesheets, public files, jsx, js), imagine going through them to find out what can be ignored, what rules (configurations) to add, and then breaking the changes with framework updates.

Next.js does it for us, yay!

Environment Variables

Why care: If you want to store some private information like secrets, API keys etc., and you don’t want to expose them in an app’s bundle. You can build a server or use a third-party provider to pull that data, but that takes time and a whole lot more space for your code.

the framework supports .env Files: Create One .env.local, add secrets, and no one will see them. You can also highlight some of them by prefixing NEXT_PUBLIC_,

Script handling and performance

Why care: You may be thinking of lazy-loading some JavaScript scripts (third-party ones too), loading them first, or setting some other priority.

Next.js can do all that if you use \<Script\> instead of standard \<script\>, Also, it can load the script to the web worker using PartyTown.

it has a server

Why care: You need a server environment. For example, to create database queries.

We talked about this in the Data Fetching section, but it’s a good point to highlight once more because you may not need a server just for data fetching. For example, maybe you need to do some filesystem-heavy logic and then get the results through the Next.js API server.

Then why react?

Next.js has more features than I described (which I personally like and wanted to highlight). So, we come to the question why do we need feedback while starting a new project.

Sometimes, you don’t need such a beast for a simple use-case. For example, if you have a static page and you don’t fetch any data. Also, you don’t have much dynamic logic. Thus, there is no need to bring in all the mentioned features as you need to learn the framework (though its docs are very good) and the resources to support the overhead. That is, why configure the Next.js CI process if you only have one HTML page?

Choose Next.js for a better developer experience, so you don’t have to spend time configuring a few tools other than coding.

original article

Leave a Comment