Introduction to Next.js and how it is different from React

Introduction

If you want to take your web development projects to the next level, consider Next.Js. But you must be thinking about why you chose Next.Js over React.

So, I have an answer for this Que. I am writing this piece to make clear about the benefits of NextJs.

NextJs introduces us to server-side rendering, opening doors to lightning-fast page loads and intensifying SEO. You always dream about creating an application that perfectly balances interactivity and performance, captivating users from the first click. And NextJs can help you with this.

You all know how to get started with React.JS Services. I am here to explain how Next.Js redefines how we build with React.

But that’s not all – Next.js handles routing effortlessly, saving you precious time and effort. No more juggling complex routing libraries; instead, revel in the simplicity of intuitive navigation. Your future in web development starts with embracing NextJs…

Keep reading to know how!

Overview

Next.js is an open-source react framework that can develop a single-page JavaScript application. It does page-based routing. It has SSR(server-side rendering) and generates static websites. Vercel, a corporation, owns the copyright and trademarks for Next.js.

Create Next.js application

You can use the following command to create a new Next.js application:

Npx create-next-app@latest
        Or
        Yarn create next-app

If we would like to use typescript in our project we can use this command:

 Npx create-next-app@latest –ts
        Or
        Yarn creates next-app –typescript

Advantages

• Next.js does automatic code-splitting for faster page loads.
• Fast refresh.
• Pre-renders every page by default.
• It performs auto-routing.
• The utilization of next/Image automates image optimization.
• In Next.js we can change the title on the browser using next/head.
• Images are lazy-loaded which means images are loaded when the user scrolled into the viewport.
• It also has automatic typescript support.
• It’s a mixture of both SSR(Server Side Rendering) and SSG(Static Site Generation).
• It also has inbuilt CSS and sass support.

Auto Routing

In Next.js auto-routing is implemented.

What file we create in the pages folder it will autoroute with the same file name.

Ex. :

You write the filename as firstPage.js in the pages folder. Then try to fetch it using the following URL: http://localhost:3000/firstPage. It will display the content of firstPage.js

The index file in the pages folder is for route ‘/’

For dynamic routes we can create page named [id].js

This will respond to http://localhost:3000/1 or http://localhost:3000/2

What is Pre-rendering?

Pre-rendering means generating HTML for a page in advance instead of doing it all client-side.

Pre-rendering can result in better performance and SEO.

When a user loads a page, its javascript will run and make the page fully interactive. The process is called hydration.

Next.js has two types of pre-rendering SSR and SSG.

SSG: HTML generates during build time and reuses for every request.

SSR: HTML generated for every request.

getServerSideProps:

This runs only on the server-side.

If we export a function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

Only Page can export this function. You cannot export from non-page files..

Ex.:

export async function getServerSideProps() {
        const res = await fetch(`https://……/data`);
        const data = await res.json();
        return { props : { data } }
        }

getStaticPaths:

This also runs only on the server-side.

Only Page can export this function. You cannot export from nonpage files.

Pages with dynamic routes use this function.

getStaticPaths must be a standalone function.

In development (next dev), this function will be called on every request. When you request this page directly, getServerSideProps runs at the request time, and this page will be pre-rendered with the returned props.

Ex.:

export async function getStaticPaths() {
        const res = await fetch('https://.../posts')
        const posts = await res.json()
        const paths = posts.map((post) => ({
        params: { id: post.id },
        }))
        return { paths, fallback: false }
        }

getStaticProps:

You can use this function with getStaticPaths only and not with getServerSideProps.

If the page exports this function, Next.js will pre-render that page at build time using the props returned by getStaticProps.

Only Page can export this function. You cannot export from nonpage files.

getServerSideProps must be a standalone function.

In development (next dev), this function will be called on every request.

Ex.:

export async function getStaticProps(){
        const res = await fetch('https://.../posts')
        const posts = await res.json()
        return { props : { posts } }
        }

Introduction when to use Next.js

• To overtake of competition.
• For better user experience.
• Lower maintenance rate.

Difference between React js and Next.js

React is a javascript library while Next is a framework.

The key benefit of React js is that it is the best option when building user interfaces for a single-page application, while Next.js is the best option for server-side rendering and generating static websites.

The React community is Large and friendly, whereas the Next.js community is small but friendly.