How to Setup Next JS — Part 1 Beginner Guide

Kirti K

·

Follow

6 min read

·

Aug 20, 2023

--

Share

In this article, I’m going to discuss How to set up Next JS step by step for web application development.

Before we start please find a few important definitions /terminologies.

Server-Side Rendering (SSR):

Server-Side Rendering is a technique used in Next.js where the initial HTML of a page is generated on the server and then sent to the client. This helps improve SEO, and initial page load performance, and provides a better user experience.

Static Site Generation (SSG):

Static Site Generation is a feature in Next.js that generates HTML for all possible routes at build time. This approach is suitable for content-driven websites and blogs where the content doesn’t change frequently.

Client-Side Rendering (CSR): Client-Side Rendering is the traditional approach where the initial HTML is loaded, and then JavaScript takes over to render and manage the UI on the client side. This can be less SEO-friendly compared to SSR.

Data Fetching:

Next.js provides various methods to fetch data for pages, including getStaticProps (for SSG), getServerSideProps (for SSR), and useSWR (a data…