Nextjs requires us to first understand a few key elements and become thorough with them These key elements or prerequisites to Nextjs are:

1. JavaScript(ES6 features like map, arrow functions, and destructing).
2. Basics of React including: Creating components, Using JSX, Passing props, Using states and all different hooks.

Once we make ourselves familiar with these features, we move on to understanding Nextjs from scratch which will make this learning process easy and comprehensive.

What is Nextjs?

Next is a React frontend development web framework, which was created by Vercel. It provides us with performing functionalities like Server-side rendering and static site generation. It is also to be noted that Nextjs is an alternative option to Gatsby. for data fetching next.js provides three options:

• getStaticProps(fetches data in build time)
• getStaticPaths
• getServerSideProps(renders on server side)

What is Server-side rendering?

In a conventional React App, the whole application is loaded at once and rendered to the user. Unlike which, Next.js allows the rendering of first page which boosts performance and is great for SEO. Apart from the aforementioned benefits, there are some other advantages of Next.js which make it an attractive and valuable experience. These are:

• Easy and smooth page routing(no need to install react-router-dom), you just have to add your page in pages folder in boilerplate next.js code.
• API Routes
• Static site generation (next export)
• Unconventional TypeScript and Sass
• Easy deployment

Next.js is like injecting steroids to your React App! enjoy this deadly combo.

reference : Nextjs Docs