What is Next.js & Why should we use it?

INTRODUCTION:

Next.js is an open-source framework for web development mainly based on React which is a JavaScript library. But, Next.js is much more than just a React library. It, also, has many additional built-in features which is not available in React.

In other words, Next.js is an advanced version of React. There are many reasons why one should use Next.js over React —

A) 

Full-Stack Web Development Framework —

React is basically focused on developing user interfaces, and state management. To write server-side code, we need to depend on third-party libraries e.g. for route handling, and creating REST APIs , we need Express.js.

Whereas, Next.js has an in-built feature i.e. API Routes, which helps developers to write backend code as well without installing any third-party libraries.

B) 

Server-Side rendering (SSR) —

One of the greatest challenge, every developer faced in React, was SEO optimization of web pages. Since in React, Each pages are , by default, rendered on client-machine which is called client-side rendering. This technique made search-engine crawlers incapable to index and crawl web-pages.

Whereas, Next.js provides Server-side rendering of every pages. SSR pre-renders all web-pages first on the server; then, the same pre-rendered HTML file is sent to the client. This way, A HTML page including data is available on the server as well, which helps search-engines to crawl pages and index it.

C) 

Static-Site Generation (SSG) —

Next.js provides one more technique which supports SEO optimization, and better performance of a web page called SSG. This technique helps generate static HTML page during development or deployment; then, the same static HTML file is deployed to a server.

If a user opens a web-page URL in his browser, a request is sent to the server or CDN. Server checks if the same requested web-page is already cached, if so, server directly send the the requested page to the user’s browser; thus, preventing additional hit on the database for that specific request.

It minimizes the page load-time, enhances the search-engine visibility.

D) 

File-System Based Routing -

React lacks built-in routing. Developers need to install libraries like React router to handle routing. React router’ s API is to be defined, and navigation among them is also done in a declarative style.

 

Whereas, Next.js uses file-system based routing which makes route defining as simple as creating a folder and file. We, only, need to create a folder within app directory, and a file inside that folder which can be page.js, or page.ts file.

We can give any name to the folder which will also become the url for that specific page.jsx or page.tsx file. We can even create dynamic route or nested route. For Dynamic route, we need to define a specific ID within folder using [ ].

For, Navigating among routes, We use Link component which maps to a specific url.

Suppose, if we want to create a dynamic route (url) for a specific account page inside dashboard folder; then, url would look like this -https://anydomainname.com/dashboard/account/[UsrId].

E)

API Routes —

Next.js ‘ API Routes built-in feature makes it convenient for web developers to create API endpoints directly in Next.js application. These are highly customizable. These endpoints can be defined by creating a folder and a route.ts or route.js page within it, inside api folder within App directory.

Whereas, react does not provide such in-built functionality. Developers require external libraries like Express.js or Firebase to setup API endpoint separately.

Follow Me: Instagram