Next JS : Basic features
Tags: nextjs, javascript, react
Published: 2022-04-16 17:00:46


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c5xama40le8ay9a9xhy.png)







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.

```js
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)**](https://nextjs.org/docs/basic-features/pages#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.



```js
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

```css
.container {  
  padding: 0 2rem;  
}

.title,  
.description {  
  text-align: center;  
}  
  
.description {  
  margin: 4rem 0;  
  line-height: 1.5;  
  font-size: 1.5rem;  
}
```
```js
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.
```js
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.

```js
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

```js
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](https://sortable.com/blog/ad-ops/what-is-cumulative-layout-shift-cls/#:~:text=Cumulative%20Layout%20Shift%20(CLS)%20is,as%20the%20user%20views%20it).


# 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.