First of all, what is Next js?

Next Js is a Fullstack Framework that is built on top of React that gives you the flexibility of building scaleable apps by allowing you to render content on the server, and by fullstack, it means you won’t just be building the front end but also the backend of your app because Next js also provides you with a node server right out of the box. It is known as the React Framework for Production.

Now here is the juicy part….

Next js comes with some benefits that make it worthy of being called the React framework for production, these include:

• Different Rendering Methods (Static server generation, Server side Rendering, Incremental site Regeneration)

• Performance (Image Optimization, Pre-fetching assets, Code splitting, Code minification)

• File-based routing

• SEO (Search Engine Optimization)

• Serverless Function

DIFFERENT RENDERING TECHNIQUES

Static Site Generation

What happens here is that your content gets pre-built on the server and then the server passes that content to the client side where all the already pre-built sever gets cached. So basically the client keeps fetching the cached content over and over which can give a huge performance boost to your site because of that reason. Some examples you can use this rendering method include blogs, marketing content e.t.c

Server Side Rendering

We use this rendering technique by generating our content straight from our server. So basically anytime we want fresh data on page refresh, we render and re-fetch that data again and again on the server. Some projects where you use this rendering method include a movie website or a dynamic news feed.

Incremental Site Regeneration

This is literally the best of both worlds where you’re able to generate your page as part of the build process on the server, but you’re also able to re-fetch new data like how you would on server-side rendering.

PERFORMANCE

Code Splitting

First of what is code splitting?

Code splitting is a technique used to divide your web app into smaller chunks and can only load the chunk that is used by that current page. With create react app you have to bring a lot of packages and learn how to code split but Next js already gives you this right out of the box without writing any special code.

Code Minification

This is another technique used by Next js to shrink your files by removing special characters and wide spaces so as to make your files smaller. When shipped online this can have a lot of impact on the performance of the site e.g in terms of load time

Image Optimization

Next js comes with a few components which include a next image component that helps you optimize your images so that when these images get loaded to the browser, based on the device you can get a smaller image (mobile) or a larger image (desktop) and the sizes of those images also reduce or increases based on the device

Pre-Fetching Assets

This is an interesting on where Next js goes ahead and pre-fetch specific assets as you scroll down your page

FILE-BASED ROUTING

Every Next js app comes with a page directory, so immediately you create a new file under the pages directory you automatically get a new route. If you ask me, this is an efficient technique where you don’t have to create or import anything from scratch because Next js already has its own file routing system.

SEARCH ENGINE OPTIMIZATION (SEO)

One of the most popular reasons for Next js is SEO. SEO is basically the language for bots. If you can figure out your website to have specific properties such as metadata, proper titles, or descriptions, this then becomes the language of your web app that communicates with the bots and makes it easier to discover your content. Here is the process, Your App gets deployed, the bot crawls your page, tries to understand what your page is about, ranks your page, and then gets displayed on google.

SERVERLESS FUNCTIONS

The main benefit of Next js is that you can have your React js code and your Node js code in the same code base. This is where your front end can easily talk to your back end. Essentially serverless function is when you only need the server to run a specific task and when there is no activity the server shuts down. You don’t always need your server to be on all the time and this is where Next js comes in because all of these are already provided for you.

You might ask, does this mean I should stop using React and move to Next js?

I’ll say this depends on the kind of project you’re trying to do. With create-react-app you need to add a lot of packages and grasp a lot of domain knowledge and configurations, this is usually not easy to do but this doesn’t mean these concepts are not needed, cause as a good developer its required for us to know these concepts. Next js, on the other hand, already has many of these bypassed for us.

Hope you enjoyed this read. Until next time Byeeeee