Intro

Before developing your web application, a decision has to be made which framework or library to use. It is not a secret that React is the most popular JavaScript library in the world. Clear proof of that is the popularity diagram below:

https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Csvelte%2Cangularjs%2Cvuejs3

A good popularity measurement is community activity on that topic. And we see that people are most willing to ask questions and answer them on React topics. Other libraries or frameworks aren’t even close.

However, If you have decided to use React for your web app, you may have heard about Next and that it is better at some things than React. Rising Next popularity shows that developers trust it even though it is a relatively new competitor compared to other frameworks and React.

In this article, you will:

• Get a basic understanding of Next framework
• Get a basic understanding of React library
• Find out why React is not a framework and Next is
• Learn about both tools’ features, and how they perform as frameworks for your next project and make a verdict for which tool you will use for a web application.

Follow to see future articles

React

Before we hop to Next and React comparison, we have to get some basic knowledge about React and Next.

React library was created by Facebook in 2011 and then open-sourced in 2013. React made headlines as an efficient, flexible and declarative JavaScript library for building interactive websites. React is really good at developing web apps that require constant data changes on their UIs. Probably the most successful apps are Instagram and Facebook. They are responsive and fast.

If you ever developed a website using only primitive technologies, you know that after pressing basically anything, the website refreshes. It is hard to find anything like that on the web these days.

This important feature of React is called Components. They show data, when that data changes, React library updates and generates new data. This process is called rendering.

React is not a framework

You may have read debates on if React is a framework or a library. Well, It is a library. Developers generally use the terms “library” and “framework” interchangeably, however, they are not the same. The main criteria for frameworks are:

• Frameworks provide ready-to-use tools, standards and templates for fast application development and libraries do not
• Frameworks control the calling of libraries for our code
• Frameworks give rules and guidelines on writing your code and structuring files and folders
• Frameworks consistent with APIs, compilers, toolsets and libraries within
• When you use a framework, the control is inverted, i.e., the framework controls the flow and calls your code, in contrast, libraries let you control the flow of the application.

React does not match these criteria and thus is not a framework.

Create React App (CRA)

To compete with frameworks, React has a dedicated framework called Create React App (CRA). It includes file structurization and other tools so that React could be used as a framework. It is the best way to start building a new single-page application in React.

CRA creates a development environment to build a React-based web app and optimizes your app for production right out of the box.

A few things good to know are that CRA does not handle back-end logic or databases and it uses babel and webpack thus I would recommend learning about them if you want to dive deep into the subject.

Created by Vercel, and released in 2016, Next is a lightweight open-source framework. It was created on top of React on purpose to make it a better experience and add additional features. It is used to build optimised and fast web apps thanks to its static site and server-side rendering stages.

Next is popular among frameworks, partly because of its features:

• Typescript. This language is gaining popularity and I would recommend learning it if you didn’t already. It is built on JavaScript and Next supports Typescript.
• Redux. Next seamlessly supports Redux, which React developers really like
• Optimal speed. Next has two pre-render stages. The first one is Server-side Rendering (SSR) which allows us to fetch data and render it at the time of request. Second is Static Generation, which uses data available before request, which helps us to cache data and get better SEO. That way, web crawlers can interact with a fully pre-rendered HTML page. Vercel claims that Next is one of the fastest frameworks and they are right.
• Configurability. Next is easily configurable as a good framework should be. Auto-generated styling solutions simplify development and provide template starters to kickstart your project.
• Routing. Creating page routes is as easy as creating folders.

Next versus React

Now that we know the basics of Next and React, we can compare them and find why they are good choices in general. Bringing a knife to a gunfight is not the best decision and choosing the main tool for your application is very important.

Advantages of React:

• Easier to learn than Next. React has extensive documentation to get started quickly.
• React has hundreds of packages and tools created to make coding easier.
• Coding is made easy due to JavaScript as It is a great language, which allows developers to create dynamic applications using less code.
• A strong community with 197k start on Github at this time of writing makes searching for help a lot easier.
• Reusable component systems let developers reuse most of the code and create easily readable code bases. These components can be loaded to different pages recurringly while keeping their characteristics.
• Create React App tool lets developers kick off their projects fast and without a hassle.

Disadvantages of React:

• SEO is worse because React applications take longer to load. Next, on the other hand, was built with SEO in mind.
• Performance is not as good as Next. Applications take longer to load and become interactive.
• Developers need tools like CRA to create a project fast. Otherwise, the configuration may be difficult and take too much time.
• React is getting updated quite fast, thus developers need to watch every update for React as new features can be added at any time. Documentation gets old fast and is not necessarily updated at the same time as updates.

Advantages of Next:

• Developers do not need extra configuration to create an SSR app, while React needs CRA.
• Out-of-the-box experience. No need to worry about extra tools or bundlers as everything is done for you at project creation.
• Built keeping in mind SEO. SSR makes applications build on Next faster for so-called crawlers that visit your website and gather data for search engines.
• Performance is a big advantage of Next as applications built with It are fast because of SSR and Static generation
• Next optimizes images which help with performance.
• Next allows you to import CSS files from a JavaScript file. This is possible because Next extends the concept of import beyond JavaScript.
• Next has Its own folder structure which makes the process more intuitive and simple.

Disadvantages of Next:

• Dynamic routing is not supported for Next as It is for React. Node.js is needed for dynamic routing.
• It takes more time to build larger sites as told by developers on various sites.
• Routing Is not that flexible as Next has its own integrated one.
• Without React fundamentals, It will be harder to create new projects.

A good thing to know is that either you are using Next or React, it is based on React and you will be coding in React. Knowing React UI libraries and core aspects is a must either way. React does not need Next, but Next needs React.

The main difference between CRA and Next is that CRA will run on the client’s browser, while Next will run on the server.

Summary

Conclusion

Both Next and React with CRA are great tools for a good development experience. Next provides a fast and lightweight framework using SSR and static site rendering. React, on the other hand, Is great for building single-page web applications. React is more versatile than Next, as It is a library, not a framework. For React users already familiar with CRA, switching to Next will not be a huge hassle and the payoff can be huge in terms of SEO and speed.

Build apps with reusable components like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo