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

Overview

An Introduction to 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. The copyright and trademarks for Next.js are owned by a corporation named Vercel.

Create Next.js application

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

Npx [email protected]
Or
Yarn create next-app

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

 Npx [email protected] –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.
• Auto routing is done in this.
• Using next/Image image optimization is done automatically.
• 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 having it all done client-side.

Pre-rendering can result in better performance and SEO.

When a page is loaded by a user, its javascript will run and make the page fully interactive. This process is called hydration.

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

SSG: HTML is generated at build time and will be reused on each request.

SSR: HTML is generated on each 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.

This function can only be exported from Page. 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.

This function can only be exported from Page. You cannot export from nonpage files.

This function is used in pages that have dynamic routes.

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 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:

This function can only be used with getStaticPaths and not with getServerSideProps.

If this function is exported from a page Next.js will pre-render that page at build time using the props returned by getStaticProps.

This function can only be exported from Page. 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.

React js is the best option when building user interfaces for a single-page application When 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.