Beginners guide to NextJS...

This blog totally explains the basics of Nextjs and is for beginners who are searching for an easy getting started with Nextjs guide. In this article, we will look at a few basic features and concepts like SSR and static site generator SSG and I have also tried to answer the most asked question React vs NextJS

PS: You must have done the basics of React.

What is NextJS ?

NextJS is a complete full stack framework built on top of ReactJS, having a lot of features which makes the development easier and faster. It serves functionalities like server-side rendering and generating static websites, is SEO (Search Engine Optimization) friendly and has a great developer experience.

Do we really need NextJS ?

We often have the question that isn't plain React good enough to build powerful apps. Yes, plain React is great. But when we are making large scale applications we need optimizations, a folder structure and a lot of extra dependencies like routing, etc. NextJS makes it easier for us. It bundles the existing React library with additional features which makes development easier, faster and developer friendly.

I will try to explain the core advantages of NextJS in simple points.

1. Inbuilt file based routing system with dynamic routes

we have a folder structure convention which needs to be strictly followed. All the pages are created under /pages folder and have route based on file names.
A new Home route can be simply created by creating file home.js /pages/home.js

PS: if you are building a multi page page app having multiple routes NextJS >> plain React.

2.Pre Rendering and client side rendering

It pre renders every page by default. It means HTML for each page is generated in advance. It results in better performance and SEO. Pre rendering is of two types :

a. Static site generation (SSG): In this method, all the pages are generated at the build time and will be reused on each request. If you have same type of pages like blog posts and ecommerce product listings, you should do SSG.
b. Server side rendered (SSR) : In this method, the HTML is generated every time when a request is made. It results in slower rendering when compared to Static generation (SSG).
c. Incremental static regeneration (ISR) : NextJS allows you to update the static site you have build. ISR enables you to use static generation on per page basis without rebuilding the entire site. It can be said a mix of positives of SSR and SSG.
d. Client side rendered (CSR) : This is the same method that is being used by React. In this you can easily render some parts of page by client side Javascript.

Interestingly, you can choose different data fetching techniques for each page in the Next app according to the requirement.

3. API routes

It provides a solution to build your APIs with Next.js giving you full stack capabilities. Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. These files are server-side only and won't increase your client-side bundle size. You can build an entire API for a new project.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

There's a lot to know about NextJS. It also packs interesting features such as Built in CSS support, image optimization, fast refresh dev environment, powerful middlewares, typescript support, routing, SEO, etc. Comment below and let me know if you guys want to know more about it.

I would highly recommend NextJS to someone who is exploring web development and also looking to learn WEB 3.0. You will surely love it.

Hope you learnt something. Happy coding! 🚀👨‍💻