Forem: sandeshsapkota

Next JS : Basic features

sandeshsapkota — Sat, 16 Apr 2022 17:00:46 +0000

Over the years, Next JS is becoming so popular and we have heard many times that our fellow developer talking about it and saying how great it is.

Truly such an amazing framework it is.

Today, I would like to talk about what really Next JS is and will be covering its major features.

What is Next JS

Next JS is a javascript framework built on top of React JS which enables static page generation and server side rendering on traditional react application,

Next JS offers few many other amazing features like such as routing and css modules.

Next JS gives us choice to choose weather to render on client side or to render on server and also we can choose it to be a hybrid application.

Let's go through each of its features.

Static Generation

Static Generation is the method of pre-rendering where the HTML pages gets generated statically at the build time. This means at the end when we build our application for the production, the HTML pages get generated with all the content and data. and Next JS by default do this and we need not to worry about any configuration.

Even if the page use external data which is in api, at the time of building the html will be generated after that api call is resolved.

Here is a small snippet that shows api call inside next js getStaticProps function which sends data to the products component.

export async function getStaticProps() {  
    let products = await fetch('http://localhost:3000/api/products')  
    products = await products.json()  
    return {  
        props: {  
            products: products,  
  }  
    }  
}

function products(props) {  
    const {products} = props  
    return (  
        <div className={'grid gap-4 p-6'}>  
  {  
                products.map((product, index) => {  
                    return <Link key={index} href={{  
                        pathname: '/products/[slug]',  
  query: {slug: product.slug,}  
                    }}><a className={'text-blue-600'}>{product.title}</a></Link>  
  })  
            }  
        </div>  
  )  
}

This is one of the most vital feature of Next JS. This helps to boost performance* and as well as better SEO because the HTML get fetched from the server.

It is recommended to use static generation for static pages like e-commerce pages, blogs and marketing pages.

From the next JS official doc

Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.

*because unlike plain react app where the DOM elements loads after loading the main Javascript file which takes more time.

Server Side Rendering

So we use Static Generation whenever when we have static type pages but what do we do when we have data that keep changing. Here, comes server side rendering.

In server side rendering the HTML get generated at server at each request. for eg we have a products page where products get added and deleted fast at that time we use Next JS getServerSideProps method and fetch api inside this function .

So each time user visit the products page the api get called and html get generated at the server and sends to the client. The way we send props to the component is same with getStaticProps function.

export async function getServerSideProps() {  
    let products = await fetch(apiURL)  
    products = await products.json()  
    return {  
        props: {  
            products: products,  
  }  
    }  
}

CSS Module

Yaaaaay! best part !! with CSS Module we can scope css. Here is how to use CSS Module

First create a css file with Filename.module.css and import it in JS file

.container {  
  padding: 0 2rem;  
}

.title,  
.description {  
  text-align: center;  
}  

.description {  
  margin: 4rem 0;  
  line-height: 1.5;  
  font-size: 1.5rem;  
}

import styles from '../styles/Home.module.css'  

export default function Home() {  
    return (  
        <div className={styles.container}>  
             <div className="grid gap-4">  
                 <h1 className={styles.title}>Next JS Title</h1>  
                 <p className={styles.description}>Next JS Title</p>  
             </div>
        </div> 
     )  
}

So this way the Home.module.css file will get loaded only when the Home component renders. and for the global stylesheet Next JS let us import the css file directly only in app.js file but we can not directly import css files in other js files.

import '../styles/globals.css'

We can also use sass by installing sass package.

Dynamic Routing

Routing with Next JS is super easy. It has file based system routing for pages. for e.g if we add a file product.js inside pages directory and /product will be automatically available as route.

But to be available as route product.js should at least export a string.

function Product() {
  return <h2>Products listing page</div>
}

export default Product

We can also make a product directory and inside it create index.js file and the /product routing will be available.

Automatic Code Splitting

As I have already explained, with css module the specific module css will render only for that component. Like this, Next JS also make chunks of Javascript file for specific files. for e.g if I have a library imported for a page that animates something or does something and is only in the current page, Next JS bundles this library only for this page but if the library used in multiple pages Next JS will bundle it globally.

Image Optimization

If we have heavier images in size, Next JS optimize the correctly sized image for each device, eventually which helps us to improve largest contentful paint. And these images are loaded only when the images entered the viewport.

For this we need to import 'next/image' component

import Image from 'next/image'
function Hero() {
  return (
    <>
      <h1>HERO SECTION</h1>
      <Image
        src={'path to the image'}
        width="350px"  
        height="300px"**
        alt="Picture of the author"
      />
    </>
  )
}

The src, width and height properties are necessary for the image component.

When the next image component loads that image sits on already allocated space which means image component solves another web vital Cumulative layout shift. Read more here.

Experience with Next JS

Developing performatic application is such a complex task . pondering over optimizing images , separating css and loading necessary css only for that specific page (scoping) and dealing with initial loading time takes a lot of work and time and Here we have Next JS which solves those problems altogether.

It has been really great experience working with Next JS and I personally feel that it is evolving for the modern web will be there for few years to come.

Thank you for reading.

reusable tab with nesting feature

sandeshsapkota — Wed, 26 Aug 2020 08:21:38 +0000

Hi everyone ! hope you having a great day.

while working project to projects, a developer may have to reuse things that he has already built before.

so based on my experience, I have to build some component like tab or accordion or any other similar thing again and again in projects to projects.

So, I thought to built a tab and if I need to build a tab next time in any project I am going to use the same tab that I have already built which will save a huge time for me.

Then I came up with this this blog . Thanks to Josh Stoddard . I have took reference from his code while trying to make it more effective to use.

And it can be use in multiple section in a page (many different tabs).

so demo below !

keeping in mind few things to use this tab would be helpful.

the header of the tab must have .tab class
tab items must be wrapped with .tab__list
tab contents items must be wrapped with .tab__content
if other than first item is required to show active initially, add is--active class on the tab__item
if you are going to use nested tab, repeating 1 to 3 is necessary

Thank you !

enjoy !

Creating an bubble animation with javascript

sandeshsapkota — Sun, 31 May 2020 12:02:13 +0000

Hello everyone ! hope you are doing well !

Today, we are going to build a bubble animation with javascript. Pre-requisite is basic understanding in HTML, CSS And Javascript.

Here is what we are going to build today.

Lets start with what we need for Html

<div id="app">  
</div>

And for CSS

*,  
*:before,  
*:after {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  

body {  
  background: rgba(240, 248, 255, 0.9);  
  overflow: hidden;  
}  

.bubble {  
  position: absolute;  
  top: 0;  
  left: 0;  
  border-radius: 50%;  
  cursor: pointer;  
  transition: linear 2s, transform .2s;  
}  

.bubble:hover {  
  transform: scale(1.7);  
}  

.bubble--bust {  
  transform: scale(1.8);  
}

Here, .bubble is the styling class for the random circle that appears on the dom and .bubble-bust is the class that we add to the bubble right before the bubble dissaper, to make the animation better.

that's it for HTML, and CSS part. this is enough for application. lets go to javascript slowly.

const root = document.querySelector('#app');  
const {innerHeight, innerWidth} = window;

Here root is the node where we append bubble . And we will need innerHeight, innerWidth of the viewport to position the bubble in random values between 0 to innerWidth and 0 to innerHeight on x and y axis repectively.

so we are going to create each bubble by initiating a class Bubble() which is function constructor. lets see what we are going to write inside the constructor

class Bubble {  
    constructor() {  
        this.bubbleSpan = undefined;  
        this.handleNewBubble();  
        this.color = this.randomColor();  

        this.posX = 0;  
        this.posY = 0;  

        // setting height and width of the bubble  
        this.height = this.randomNumber(60, 20);  
        this.width = this.height;  

         this.bubbleEnd.call(this.bubbleSpan,this.randomNumber(6000, 3000))  
    }  
}

from the first three lines we are creating this.handleNewBubble() creates a new node and this.color = this.randomColor() sets the random background color.

this.height = this.randomNumber(60, 20);  
this.width = this.height;

this.bubbleEnd.call(this.bubbleSpan, this.randomNumber(6000, 3000))

This is for setting height and width of the bubble between 20 to 60px. and width will be equal to height. And this.bubbleEnd() function is for removing the bubble between 3 to 6 second after it's appearence.

Lets see all other major function of our app.

    // creates and appends a new bubble in the DOM
    handleNewBubble() {
        this.bubbleSpan = document.createElement('span');
        this.bubbleSpan.classList.add('bubble');
        root.append(this.bubbleSpan);
        this.handlePosition()
        this.bubbleSpan.addEventListener('click', this.bubbleEnd)
    }

    handlePosition() { // positioning the bubble in different random X and Y
        const randomY = this.randomNumber(60, -60);
        const randomX = this.randomNumber(60, -60);

        this.bubbleSpan.style.backgroundColor = this.color;
        this.bubbleSpan.style.height = this.height + "px";
        this.bubbleSpan.style.width = this.height + "px";

        this.posY = this.randomNumber(innerHeight - 20, 20);
        this.posX = this.randomNumber(innerWidth - 20, 20);

        this.bubbleSpan.style.top = this.posY + 'px';
        this.bubbleSpan.style.left = this.posX + 'px';

        const randomSec = this.randomNumber(4000, 200);
        setTimeout(this.handlePosition.bind(this), randomSec); // calling for re-position of bubble
    }

    bubbleEnd(removingTime = 0) {
        setTimeout(() => {
            this.classList.add('bubble--bust');
        }, removingTime === 0 ? removingTime : removingTime - 100);

        setTimeout(() => {
            this.remove();
            bubbles.push(new Bubble())
        }, removingTime)

    }

Long thing short ...

so, handleNewBubble() function insert a new node to the DOM and calls for handlePosition() function. it also asign the event handler if the buble is clicked it will be remove from the DOM because we are calling bubbleEnd() function.

handlePosition() function positon the bubble , styles it with height, width and background-color and re-position it.

And, bubbleEnd() function just remove the bubble node from the DOM and it adds bubble--bust class to the node before removing to make the bubble bigger to create animation.

And finally here is where we call the new Bubble() so new bubble appears on the DOM after every second.

// creating many bubble instance in every second  
setInterval(function () {  
    new Bubble()  
}, 1000)

We made it :) Gracias !

magnet-cursor

sandeshsapkota — Sat, 25 Jan 2020 13:46:17 +0000

Inspired from this website.