Next Js React

Next Js : It is reactJs framework for SSR (Server side rendering). It helps in SEO

Other frameworks SSR libraries :

React js (Next Js)

Vue js  (Nuxt Js)

Angular js (Angular Universal)

 

Note : Webpack | It is used for bundling the files

Webpack is used for single page application


Seo (Search engine optimization) scenarios

1)For google listing. 

2)The google crawlers search for the word in the html file and acc it makes it’s ranking

3)Basically server side rendering is best for seo

When page is rendered from server like in php , jsp, node handlebars

Page rendered by the server is slower

a)For each page , we have to download the list of images, css (boostrap) , javascript files

 

Problem statement : Because of the above problem , page rendered from server are generally slower. To resolve this problem people may use

a)CDN : They put their static files (css,js,images) over the CDN. Thus the performance gets better then earlier

b)Image sprite

c)…etc

 

Later on SPA comes into market.What makes the SPA frameworks fast

a)They download the bundle file first time when we hit the react/angular server. Then next time we do not need to download the  files again. So over latency decreases. 

b)IN spa , we have bundle file where there is minification already applied

So, the size of bundle gets reduced too much.

Note  : Generally they use the Ggip compression algorithm

 

Single page applications get a lot of eyes these days.  Webpack works mainly with SPA (Single page application)

Note : So , SPA is very fast web applications

 

Example : Suppose in react SPA. we have 3 links Home , About  , Contact us. So all the components are present inside the bundle (main.bundle.js) file only.

 

Drawbacks :

1)Because many search engine crawlers do not understand Javascript.

So in react the first component itself gets loaded through the javascript.

SO If crawlers can not understand javascript , then it means that crawlers will see nothing in our website html.

 

So for google crawlers the whole spa application has no content. Because of this the seo is very bad

 

Solution : because the SPA frameworks are very bad in seo. So the solution is to render the react application from server (Node server)

 

Next Js is very good at it. It is used for SEO optimization for react applications

 

Next js is the react framework

How does next js works 

1)It provides a server in nodejs . This server renders the requested url

2)Requests data from API + generates it in HTML code (backbone for SEO)

3)Uses webpack to bundle and babel for transpilation

 

Features of  Next Js

1)SSR react applications

2)SEO Friendly

3)Code splitting (Splits our code into series of lightweight bundles)

4)HMR : Hot modules reload (Instead of reloading the complete application , it loads the module in which changes has been done

 

4)import Head component

5)We can create css in javascript files

6)very beautifully handles the routes

7)It can be used as a server. It can use node frameworks 

a)express b)hapi js c)Koa js

8)Most important is clean url

http://pankajagarwal.com/about

 

 9)Better error handling feature

10)They do not have any specific folder structure. 

Note : But pages and static folder should be created

 

Installing Next js

 

  • Create custom application

 

a)Create package.json

npm init -y

b)Install 3 libraries

npm i react react-dom next –save

c)Create a index.js inside the pages folder

pages/index.js

const Home = ()=>{

   return (

       <div>

           Inside the home page !

       </div>

   )

}

export default Home;

 

d)Create about us page

Create about.js inside pages folder

pages/about.js

 

 

  • Use the cli tool

 

npm i create-next-app -g

create-next-app eshop

 

3)Now apply the link for navigation. We have created 2 components a)Home

b)About

But we have not created any of the navigation link. To create the navigation link

a)components/nav.js

import Link from ‘next/link’

 

const Nav = ()=>{

return (//JSX code

   <div>

       <Link href=“/”>Home</Link> |

       <Link href=“/about”>About us</Link>

   </div>

)

}

export default Nav;

 

b)Now , include this Nav component for Home , About components/pages

 

Inside pages/index.js

import Nav from “../components/Nav”

const Home = ()=>{

   return (

       <div>

           <Nav/><hr/>

           <h1>Inside the home page !</h1>

       </div>

   )

}

export default Home;

 

Inside pages/about.js

import Nav from “../components/Nav”

const About = ()=>{

   return (

       <div>

           <Nav/><hr/>

           <h1>Inside the About us page !</h1>

       </div>

   )

}

export default About;

Problem statement : The problem with above approach is that for every file we need to include the Nav component

 

c)Solution : The solution to prevent the redundancy

Create the Layout

 

i)Create components/layout.js

import Nav from “./Nav”

const Layout = (props)=>{

return (

<div>

<Nav/>

{props.children}

<Footer/>

</div>

)

}

export default Layout;

 

ii)Now call other components within this layout

pages/index.js

import Layout from “../components/Layout”

const Home = ()=>{

   return (

       <Layout>

           <h1>Inside the home page !</h1>

       </Layout>

   )

}

export default Home;

 

iii)pages/about.js

import Layout from “../components/Layout”

const About = ()=>{

   return (

       <Layout>

           <h1>Inside the About us page !</h1>

       </Layout>

   )

}

export default About;

 

How to use bootstrap with nextJs

components/Layout.js

import Nav from “./Nav”

import Head from “next/head”;

const Layout = (props)=>{

return (

<div>

<Head>

<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=“sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=“anonymous”/>

</Head>

<Nav/>

{props.children}

</div>

)

}

export default Layout;

Initialize the component with proper values

Component.getInitialProps() : Will give u value from props. It is used to initialize the component

 

Note : let us fetch posts inside the Home component

import Layout from “../components/Layout”

import fetch from ‘isomorphic-unfetch’;

const Home = ({posts})=>{

console.log(“The props is “,posts)

   return (

       <Layout>

           <table className=“table”>

<th>Id</th><th>Name</th>

{

posts.map((post)=>{

 

return (

<tr>

<td>{post.id}</td>

<td>{post.title}</td>

</tr>

)

})

}

           </table>

       </Layout>

   )

}

 

Home.getInitialProps = async (ctx)=>{

 

let data = await fetch(“https://jsonplaceholder.typicode.com/posts”);

let record = await data.json();

return {

posts : record

}

}

 

export default Home;

 

Site Footer