Benefits from using nextjs

20/12/2021 Wassim Nassour

Introduction :

I will assume you already heard about Nextjs, in video or conference or article …., but maybe you don’t understand what is it and why it’s so much popular, that’s exactly what we will see in this article, why Nextjs is your best choice for your next React project right now and what are the benefits of using it?

What is next js

it's a framework built on top of React, that gives you the flexibility of building scalable apps by allowing you to render content on the server. also, it's the full-stack framework you won't build the frontend of your app, you can write the backend as well cuz next js provide us with node server out of the box, besides its full-stack framework, it comes with a lot of amazing things, for example, code-splitting, good performance, file-based route. , Seo, serverless functions, different rendering techniques, server-side rendering, static site generation increment site regeneration, don't freeze by those names we will dig deeper into all of them.

Rendering techniques

With Next.js, you can choose how to render content whether you want to render content on the server or the client, whereas React (CRA) render only on the client-side aside from server components that are coming to React, Nextjs give you the options to decide where you want to render the content using 3 different technique that Nextjs supports, and yeah you can combine them all in one application, each page has different rendering techniques, and solve Performance, and SEO issues.

SSG: Static site generation

SSG or static site generation is a rendering technique for That HTML is generated at the built time, If there is fetching from API in the page it will fetch all the data in advance and once this data is available Nextjs generate a static HTML which we can cache on a CDN server, to provide the user with a high-performance, which also makes it easy for the search engine crawlers to crawl our pages therefor better SEO but this technique has a downside, let’s imagine you have news app with thousands of pages, and you want to add hot news immediately, you will face the issue of how much time you will wait before the app, is done with building the page with the latest data and this is a serious issue with those types of websites next.js solve this with two different techniques SSI and SSR

SSR : Server Side Rendreing

server-side rendering is a rendering technique, rebuild the pages for each request and do fetching from APIs if they exist, and you can use this by implementing the getServerSideProps function inside your page, you can learn more about that here

ISG: Increment site generation

ISG came to solve an issue with SSG, wish is if we want to build some specific pages or update some of them you will need to rebuild the entire app, and this is an issue because it will take a lot of time if you have many pages or you have an e-commerce website and you are adding products to it, you will have to solve this issue, also we can’t use SSR because we will lose the performance benefit from SSG. ISG came between SSG and SSR, with ISG you rebuild the pages after a period of time that you can control, without the need to manually trigger the rebuild of the site. Next.js defines which pages to generate at build-time based on the paths returned by, getStaticPaths

For example, you can generate the most popular 1,000 products at build-time by returning the paths for the top 1,000 product IDs in getStaticPaths.

Image Optimisation :

The Next.js , Image component, next/image, is an extension built top <img> element, evolved for the modern web. It includes a variety of built-in performance optimizations to help you achieve good Core Web Vitals. These scores are an important measurement of user experience on your website and are factored into Google's search rankings.

Some of the optimizations built into the Image component include:

Improved Performance: Always serve correctly sized images for each device, using modern image formats. For example, if you are on a mobile phone it will serve minified images for the mobile app.
Visual Stability: Prevent Cumulative Layout Shift automatically.
Faster Page Loads: Images are only loaded when they enter the viewport, with optional blur-up placeholders
Asset Flexibility: On-demand image resizing, even for images stored on remote servers

Routing :

next has file based routing feature ,you don't need to install additional package for this , means if you create pages directory , you are having routes ,

and next js has 3 difrents routing thechenique index routes , nested routes , dynamic routes :

The router will automatically route files named index to the root of the directory.

pages/index.js → /
pages/blog/index.js → /blog

Nested routes

The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still.

pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

Dynamic route segments

To match a dynamic segment, you can use the bracket syntax. This allows you to match named parameters.

pages/blog/[slug].js → /blog/:slugt (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)

ServerLess Functions

ServersLess functions basically is just javascript functions , has two arguments req stand for request , and res stand for response ,it's look like express controller , the great thing about ServersLess functions , is that you can have endpoint without care about hoisting a server somewhere or dealing with cors 🤯 , and do things quickly like authentication form contactus working with cms ...... what you need to do to have sever less function , is just create folder api inside pages directory

pages /
api /
Login.tsx

if you follow this structure you will have endpoint with apil url /code https://www.localhost:3000/api/login inside this file you can write your server less function which takes req and return response .

WN