Why Next.Js?

Next.Js is a fast framework that uses React internally. Next.Js provides significant advantages over React. It is built on top of React that adds additional features and benefits which makes it a popular choice for building modern web applications.

A React app usually contains states, use effects, hooks, API calls, etc. Finally, you create a build of React app and deploy it on the server. If the user visits your website which is written in React then the Java script bundle is loaded on his browser initially which is quite heavy. Following that use effect hooks are loaded then the API calls are made to fetch the data. Finally, components will be re-rendered with the data, and users can now interact with the website. All this process consumes a lot of time which has the following effects:

  • React uses Client Side Rendering(CSR) hence, needs a lot of time to process which impacts the User Experience.

  • The SEO cannot be performed due to a large amount of waiting time to load the React website. The bots that perform web crawling assume that the page is empty and the SEO score falls.

For these reasons, the framework Next.Js is used which internally works like React.js but has some additional features to overcome the above problems.

When you create the build for the Next.Js app it fetches the data and makes API calls at the time of build and creates HTML and CSS files which will be deployed on the server, unlike React which initially creates JS files and then practices Client-side Rendering.

Since the data is prefetched it takes less time to load when the user visits the website. This is due to Server Side Rendering used by Next.js.

React uses Webpack to bundle up the code which takes a lot of time to process, whereas Next.js uses Rust for this purpose so the compile time is very less and the process is done faster.

For the website built in Next.js, vercel.com provides free hosting. This also helps in CI/CD pipeline.