DEV Community: Anurag Gharat

Memoization in React

Anurag Gharat — Sun, 16 Feb 2025 14:09:12 +0000

Lately, I have been working on some old React applications. During this time I learnt and implemented some techniques to optimize and improve the performance of a React application. One such technique is Memoization.

Here in this blog, I will talk about how to apply Memoization in a React application. We will see how the React.memo() function can be used to avoid unnecessary re-renders. We will also check the useCallback and useMemo hooks and how to use them alongside the React.memo() higher-order function. In the end, we will discuss practical use cases on when to apply memoization and when to skip.

In technical terms -

Memoization in software engineering is a technique of caching the results of expensive operations and reusing them whenever the same operation is called. Using this technique, redundant time-consuming operations are skipped, thus improving performance.

Before we move on to the actual topic, let’s revise some basics first.

React is a JavaScript library used for building user interfaces. It follows a component-based architecture, where the UI is divided into small, reusable components that function independently based on their state.

A state can be thought of as the local memory of a component, responsible for holding its dynamic data. React ensures the UI stays up-to-date by re-rendering components whenever the state of that component changes. In essence, any change in a component’s state triggers a re-render to reflect the updated change on the UI.

A Component in React will re-render on two occasions

If the state of that component changes.
If the Parent component of that component re-renders.

For example, if we have Component A, which is a parent of Component B, then every time Component A re-renders, B will automatically re-render itself since it is the child of that Component. See the image below for a better understanding.

By triggering a component re-render, React maintains the sync between all the components and keeps the UI updated with the latest changes. But this very own re-rendering property of React also is responsible for slowing down the application. You see, re-rendering a component means re-creating the entire Component along with the variables and functions inside it from scratch. This process is not always simple and inexpensive. For example, look at the below image

When Component A re-renders, all components within its branch(child components) will also be re-rendered. This means that even if a component didn't undergo state change, it will still be re-rendered again since its parent got re-rendered. This at times is unnecessary and inefficient. So as per the above image, if Component A re-renders, Component B, C, and D will be re-rendered.

If these components involve resource-intensive operations such as data fetching, initializing large objects or arrays, or running computationally expensive functions, those operations will be executed again. This situation becomes even more problematic if Component X triggers a re-render. In such a case, not only will the entire Branch A(children of A) re-render, but so will Branch B(children of B), causing significant performance issues.

Hence, the inherent behavior of React, which involves re-rendering, can also contribute to performance degradation. Now that we have identified the problem, let's explore how we can address it effectively.

Enough talk, let’s start writing some code. In the below code, I have written a simple Parent component with a count state, a variable displaying the count value, and a <button> to update the count. Inside the Parent component, I have added a simple Child component that takes no props.

import { useState } from 'react'

function Child() {
  console.log("Child component rendered");
  return (
    <p>This is child component</p>
  )
}

export default function Parent() {
  const [count, setCount] = useState(0);
  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <Child />
      </div>
    </>
  )
}

After running the above code in the browser we can see the below output in the browser's console.

Try clicking the <button> to change the count. If you see the console again, you will observe that not only the Parent component is re-rendered but also the Child component.

This is the unnecessary re-rendering of the Child component problem that we discussed earlier.

Component rendering can be a heavy task that might affect the overall performance of an application. To avoid this unnecessary re-rendering of components, we can use the React.memo() higher-order function.

What is `React.memo()`:

React.memo() is a higher-order component provided by React to create a memoized version of a component. A memoized component makes a shallow comparison of the previous and new props. If the props are different, the components re-render while if the props are the same the component re-rendering is skipped. If props are absent, the component does not re-render on the Parent component re-render. Let’s see this in action by modifying the previous non-performant code.

import React, { useState } from 'react'


function Child() {
  console.log("Child component rendered");
  return (
    <p>This is child component</p>
  )
}
//creating a memoized Component 
const MemoizedChild = React.memo(Child);

export default function Parent() {
  const [count, setCount] = useState(0)
  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <MemoizedChild />
      </div>
    </>
  )
}

Now re-run the application and open the console. The Parent and Child component will be re-rendered on the initial render. After that every time you click on the <button>, only and only the Parent Component will re-render and rendering of the Child component will be skipped.

Well, that's how easy it is to memoize a component. Let's try some more scenarios with the same example and see how memoization performs in those cases.

In the previous code, I added a new variable called user of type string and passed it as a prop to the Child component.

import React, { useState } from 'react'

//passing user as a prop to Child
function Child({user}) {
  console.log("Child component rendered");
  return (
    <>
      <p>{user}</p>
    </>
  )
}

const MemoizedChild = React.memo(Child);

export default function Parent() {
  const [count, setCount] = useState(0);
  const user = 'joe';
  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <MemoizedChild user={user} />
      </div>
    </>
  )
}

Now, if you rerun the application and press the count button, the Child component will not re-render. This is because we have memoized it. Every time the Parent component re-renders, the memoized Child component does the prop check. Since the user prop does not change, the Child component does not re-render.

Now, I will change the type of user variable to an object and run the same scenario.

import React, { useState } from 'react'

function Child({user}) {
  console.log("Child component rendered");
  return (
    <>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </>
  )
}

const MemoizedChild = React.memo(Child);

export default function Parent() {
  const [count, setCount] = useState(0);
  const user = {
    name: 'joe',
    email: 'joe@email.com'
  };
  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <MemoizedChild user={user} />
      </div>
    </>
  )
}

Now after the initial render, if I click on the count button, the Child component starts re-rendering again! The memoization fails in this case.

But why? We memoized the function and the value of the user variable also does not change so why does the Child component re-render? Well, this is because React.memo() does a shallow comparison of the props that are passed to the component. Props of types String, Number, and Boolean are passed by value whereas props of type Arrays, and Objects are passed by reference.

var a = 'joe';
var b = 'joe';
a === b //true

var objA = {
   name: 'joe'
}

var objB = {
   name: 'joe'
}

objA === objB //false

If you do not understand the above code, I suggest you read about how Objects and Arrays work in JavaScript.

So what's happening in our React code is the user variable is of type Object. In the initial render, it is initialized with an initial reference. When the count state is updated in the Parent Component, the Parent component re-renders and hence the user object is initialized again with a new reference. So now the memoized Child component does a shallow check i.e. it checks the reference of the object rather than the actual object values. Since the reference has changed after the initial render it assumes that the variable has been updated and hence the Child component gets rendered again!

Hence, to avoid re-rendering, we need to preserve the reference to the user object between the renders. In such scenarios, the useMemo() hook can be helpful.

The useMemo() hook is used to memoize a value and preserve its reference between component re-renders. This hook takes an array of dependencies as a second parameter and recalculates the value if any of the dependencies change. In our case, we can use this hook to memoize the user object. Let's update the code with the useMemo() hook.


import React, { useMemo, useState } from 'react'

function Child({user}) {
  console.log("Child component rendered");
  return (
    <>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </>
  )
}

const MemoizedChild = React.memo(Child);

export default function Parent() {
  const [count, setCount] = useState(0);
  const user = useMemo(() => (
    {
      name: 'joe',
      email: 'joe@email.com'
    }
  ), []);
  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <MemoizedChild user={user} />
      </div>
    </>
  )
}

Now the user object will not re-initialized and lose its reference between renders and therefore the Child component will not re-render whenever the Parent Component re-renders.

The useMemo() hook can also be used to memoize a returned value from a heavy function. The value is saved locally and only re-calculated if any of its dependencies change. Take a look at the following example

import React, { useMemo, useState } from 'react'

export default function Home() {

  const [count,setCount] = useState(0)
  const [age,setAge] = useState(24)

  function handleCount(){
    setCount(count+1)
  }

  function handleAge(){
    setAge(age+1)
  }

//use the useMemo hook to memoize the memoizedDays value and only re-run //the getDays function if age changes
  const memoizedDays = useMemo(function getDays(){
    console.log("get days")
      return age * 365
  },[age])

  return (
    <div>
        <h1>Count is {count}</h1>
        <button onClick={handleCount}>Add Count</button>
        <h1>Age is {age}</h1>
        <button onClick={handleAge}>Increment Age</button>
        <div>Get days {memoizedDays}</div>    
    </div>
  )
}

You can read more about the useMemo() hook here..

Now let's pass one more prop to the Child component, this time a function.


import React, { useMemo, useState } from 'react'

function Child({user, handleLogout}) {
  console.log("Child component rendered");
  return (
    <>
      <p>{user.name}</p>
      <p>{user.email}</p>
      <button onClick={handleLogout}>Logout User</button>
    </>
  )
}

const MemoizedChild = React.memo(Child);

export default function Parent() {
  const [count, setCount] = useState(0);
  const user = useMemo( () => (
    {
      name: 'joe',
      email: 'joe@email.com'
    }
  ), []);

  const handleLogout = () => {
    console.log('Logging out user');
  }

  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <MemoizedChild user={user} handleLogout={handleLogout} />
      </div>
    </>
  )
}

Now if you check in the browser, the Child will start again re-rendering on the count state change.

The reason behind re-rendering is similar to what we discussed in the previous example. Similar to objects, functions are also passed by references. Hence, when the Parent component re-renders, the reference of the function is changed and hence the memoized child Component re-renders again.

To avoid this, we can use the useCallback() React hook which is similar to the useMemo() hook. The useCallback() hook is used to optimize callback functions passed to child components. The only difference is useCallback() hook is used to memoize functions whereas the useMemo() hook is used to memoize values. You can read more about the useCallback() hook here.

import React, { useCallback, useMemo, useState } from 'react'

function Child({user, handleLogout}) {
  console.log("Child component rendered");
  return (
    <>
      <p>{user.name}</p>
      <p>{user.email}</p>
      <button onClick={handleLogout}>Logout User</button>
    </>
  )
}

const MemoizedChild = React.memo(Child);

export default function Parent() {
  const [count, setCount] = useState(0);
  const user = useMemo( () => (
    {
      name: 'joe',
      email: 'joe@email.com'
    }
  ), []);

  const handleLogout = useCallback(() => {
    console.log('Logging out user');
  }, []);

  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <MemoizedChild user={user} handleLogout={handleLogout} />
      </div>
    </>
  )
}

In the above code, we used the useCallback() hook to avoid the re-rendering of the Child Component by preserving the function reference. Now every time, the Parent component re-renders, the handleLogout() function will not lose its reference and hence the Child component will not re-render.

As you can see, only the Parent component gets re-rendered when the count state changes.

With that, we have completed all the scenarios that you might encounter while trying to implement Memoization in your React app. While Memoization is great for improving performance, if not used correctly it can negatively affect performance.

Let's understand this by an example. I have used the same code from our previous example where we are memoizing the user and handleLogout props and passing them to the memoized Child component.

import React, { useCallback, useMemo, useState } from 'react'

function Child({user, handleLogout}) {
  console.log("Child component rendered");
  return (
    <>
      <p>{user.name}</p>
      <p>{user.email}</p>
      <button onClick={handleLogout}>Logout User</button>
    </>
  )
}

const MemoizedChild = React.memo(Child);


export default function Parent() {
  const [count, setCount] = useState(0);
  const user = useMemo( () => (
    {
      name: 'joe',
      email: 'joe@email.com'
    }
  ), []);

  const handleLogout = useCallback(() => {
    console.log('Logging out user');
  }, []);

  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <MemoizedChild user={user} handleLogout={handleLogout} />
      </div>
    </>
  )
}

As you can see, we had to add quite a few extra lines of code and made the code complex just to memoize a simple Component. Let's look at the un-memoized version of the above code.

import { useState } from 'react'

function Child({user, handleLogout}) {
  console.log("Child component rendered");
  return (
    <>
      <p>{user.name}</p>
      <p>{user.email}</p>
      <button onClick={handleLogout}>Logout User</button>
    </>
  )
}


export default function Parent() {
  const [count, setCount] = useState(0);
  const user = {
      name: 'joe',
      email: 'joe@email.com'
  };
  const handleLogout = () => console.log('Logging out user')
  console.log("Parent component rendered");
  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <div>
        <Child user={user} handleLogout={handleLogout} />
      </div>
    </>
  )
}

By simplifying our code, we reduced unnecessary complexity and eliminated a few extra lines. In software engineering, every line of code contributes to memory usage and can impact application performance, even if marginally. In our example, the Child component is simple and does not involve heavy computations. As a result, rendering this component has minimal impact on the application's overall performance. In such scenarios, adding an extra layer of complexity through memoization is unnecessary and does not justify the effort, as it offers no meaningful performance gains.

When I think about optimizing anything, I always follow the following principle.

"The cost of optimization should not outweigh the actual benefit from optimization".

This means, that while performing any sort of optimization, always make sure that the code you write doesn’t introduce unnecessary complexity or maintenance overhead that outweighs the benefits of the optimization itself. So next time you think about optimizing something, think if the performance boost after optimizing is worth the effort and extra code that you write.

So then when should we actually consider Memoization?

Here is a very good example for it.


function PostComponent({post}) {
  console.log(`Post Component - ${post.id} rendering`);

  function getPostDetails(post) {
    console.log(`getPostDetails - Fetching Post details for Post ${post.id}`);
    // Simulate a fetch request
    const res = `Fetching details for Post ${post.id}`;
    return res;
  }

  // Call getPostDetails directly in the render
  const postDetails = getPostDetails(post);

  return (
    <div>
      <p>{post.title}</p>
    </div>
  )
}

export default function App() {
  const [posts, setPosts] = useState([
    {
      id: 1,
      title:"Post 1"
    },
    {
      id: 2,
      title:"Post 2"
    },
    {
      id: 3,
      title:"Post 3"
    },
    {
      id: 4,
      title:"Post 4"
    }
  ]);


  const handlePost = () => {
    //consider expensive calcuations happening here
    console.log('Logging out user')
  };
  const [count, setCount] = useState(0);
  console.log('App Component rendered');
  return (
    <>
      <div>
      <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
         </button>
        {posts.map((post) => <PostComponent key={post.id} handlePost={handlePost}  post={post} />)}
      </div>
    </>
  )
}

In the above piece of code, we have an <App/> component that has a list of posts and a count state. Inside the App component, we are rendering the list using the <Post/> component and passing the handlePost and post props. The <Post/> component calls a function to get details of a post.

In this case, memoizing is essential because we have a long list of posts. So every time the count changes and the <App /> component re-renders, all these <Post/> components will also render and the function getPostDetails() will be called again. If you see the below picture, you can notice that all the <Post /> components get re-rendered again.

Let's memoize this code!

function PostComponent({post}) {
  console.log(`Post Component - ${post.id} rendering`);

  function getPostDetails(post) {
    console.log(`getPostDetails - Fetching Post details for Post ${post.id}`);
    // Simulate a fetch request
    const res = `Fetching details for Post ${post.id}`;
    return res;
  }

  // Call getPostDetails directly in the render
  const postDetails = getPostDetails(post);

  return (
    <div>
      <p>{post.title}</p>
    </div>
  )
}

const MemoizedPostComponent = React.memo(PostComponent);

export default function App() {
  const [posts, setPosts] = useState([
    {
      id: 1,
      title:"Post 1"
    },
    {
      id: 2,
      title:"Post 2"
    },
    {
      id: 3,
      title:"Post 3"
    },
    {
      id: 4,
      title:"Post 4"
    }
  ]);

  const handlePost = useCallback(() => {
    //consider expensive calcuations happening here
    console.log('Logging out user')
  }, []);
  const [count, setCount] = useState(0);
  console.log('App Component rendered');
  return (
    <>
      <div>
      <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
         </button>
        {posts.map((post) => <MemoizedPostComponent key={post.id} handlePost={handlePost}  post={post} />)}
      </div>
    </>
  )
}

Observe the optimizations in the output below.

As you can see, on the count change only the <App/> component re-rendered and all the <Post/> components skipped re-rendering. This is the perfect example where Memoizing will help improve the performance!

Best Practices

Before we end this blog, let's look at some best practices for React Memoization

Skip memoizing Static Component or Components whose props rarely change.
Use React.memo() judiciously. If the props for your components change regularly, Memoizing is not needed there.
Use the useCallback() and useMemo() hooks for memoizing non-primitive types of props like Objects, Arrays, or Functions.
Use the React profiler tool to monitor the performance of your Application.
Always evaluate the efforts for Optimization against the benefits.
The React.memo() function only performs shallow comparison of props, if you want to perform deep comparison, use a custom comparator function. A custom comparator function is passed as a second parameter to the React.memo() function in cases where custom comparison between old and new props is required. If this function returns true, the Memoized Component will re-render and will skip re-rendering if the function returns false.

const MemoizedPost = React.memo(PostComponent, (prevProps, nextProps) => {
  if (deepCompare(prevProps, nextProps)) {
    return true;
  } else {
    return false
  }
})

Wrapping Up

That's all we had for Memoization in React. In this blog, we understood how Memoization works in React with the help of the React.memo(), useCallback() and useMemo() hook. We saw a few scenarios on handling Memoization as well as a few examples of when to use Memoization and when to skip. In the end, we saw a few best practices when it comes to Memoization!

I hope you liked this blog and learned something new! I share such development-related tips on my Twitter as well. Happy coding!

Git cheat sheet

Anurag Gharat — Sun, 08 Dec 2024 07:28:18 +0000

Here are some basic Git commands to ease your life as a developer.

Git Basics

View Git configurations

git config --list

Set user name

git config --global user.name "example name"

Set user email

git config --global user.email "example email"

Initialize an empty git repository

git init

Get the status of changes in files.

git status

Display the entire commit history

git log

Get the difference between the working directory and the staging area

git diff

Show the difference between the working directory and the last committed change

git diff HEAD

Handling file changes

Add a specific file to the staging area

git add <file-name>

Add all changed files to the staging area

git add .

Commit the staged changes with a commit message

git commit -m "Commit Message"

Remove a specific file from the staging area

git rm <file-name>

Revert a commit with a new commit

git revert <commit-hash>

Stash current changes

git stash

Apply stashed changes

git stash apply

Reset your last commit and keep the changes

git reset --soft HEAD~1

Handling branches

Create a new branch from the current branch

git branch <branch-name>

Switch to a different branch

git checkout <branch-name>

Create a new branch and switch to it

git checkout -b <branch-name>

List down all branches

git branch

Merge the branch with the current branch

git merge <branch-name>

Working with Remote

Clone an existing git repository

git clone <repo-url>

Connect your local git repository to a remote repository and assign it a name

git remote add origin <url>

Pull changes from a remote branch

git pull origin <branch-name>

Fetch changes from a remote branch

git fetch origin <branch-name>

Push committed changes to a remote branch

git push origin <branch-name>

Push all the local branches to remote

git push origin --all

Pull a remote branch and create a local branch for it

git checkout -b <local-branch-name> origin/<remote-branch-name>

Rebase the current branch with a specific branch

git rebase <branch-name>

Interactively Rebase the current branch with a specific branch

git rebase <branch-name>

Apply changes from a certain commit in your branch

git cherry-pick <commit-hash>

Explain Git to a 5 year old!

Anurag Gharat — Sun, 13 Nov 2022 18:01:58 +0000

So imagine you are working on a painting. You started the work on Monday and by the end of the day you made pretty good progress on it. Now the only thing left is adding some colors and some final touch up. So you decide to do it next day.

Next day you wake you and resume your work. Unfortunately while working you spill the bottle of water color on your painting and now the entire painting is destroyed. You can’t do anything about it, than to start over again!

Here at this point you must be thinking what if I could

Go back in time and resume my work before the water color gets spilled?
Go back to yesterday and create a exact copy of completed work so that even if I mess up one, I have another copy to carry on my work.

But this would only be possible if you had a Time machine! But neither of us knows Tony Stark or Bruce Banner who could let us borrow their time machine from Avengers Endgame!!

So Git is nothing but a time machine! Not for your Painting, but your code!

Git allows us to create

Create stops(commits) in your project
Reset your project to any of these previous stops.
Create copies of your project and carry on your work separately
Merge these copies whenever required.

Isn’t Git amazing?

If you go by the definition, Git is a Version Control System. That is, a System that lets you manage and control the version of your project.

Whereas GitHub is a platform by Microsoft that uses Git to manage your projects.

I hope I was able to explain what is Git in simple terms for you!

How to create a Blog using Next.js and Markdown.

Anurag Gharat — Sun, 24 Jul 2022 12:22:13 +0000

Hello Devs! Today we will see How to create your Blog using Next.js and Markdown!

Markdown

Markdown is a simple syntax that is used to format text into Headers, Lists, Italic, Bold etc. Markdown makes it easy to format texts for you. The syntax of Markdown is simpler to HTML. Markdown files end with .md extension. Readme file which we use in GitHub uses Markdown.

Here’s a example on syntax of Markdown

# This is Heading1 <h1>
###### This is Heading6 <h6>
*Bullet Point
1.Numbered Point
_Italic text_

So by now you would have understood what Markdown does. In our Blogging website we will create Posts in Markdown syntax and display them on our website.

Getting Started

Lets create a fresh Next.js application using npx.

npx create-next-app myblog
cd myblog

We created a new Next.js project by the name “myblog”. Now open up this folder in your favorite code editor. I’ll use VS code here.

I am using Tailwind CSS for styling my webpages. If you prefer Bootstrap or writing your CSS you can go ahead with your preference. If you want to know how to add Tailwind CSS to your Next.js application read my article here.

https://dev.to/anuraggharat/how-to-add-tailwind-css-in-next-js-3epn.

So lets understand what we will be creating.

We are creating a simple website which will have two pages - Home page and Blog page. The Home page will have the list of all Blogs and we will generate individual Static Blog pages for each blog.

So lets start!

Setting up the Project.

Create two folders named components and posts in the root directory of your project. Posts folder will house all our Posts which will be written in Markdown while Components folder will have all our components which we will use.

Now create a folder named blogs inside your pages folder. Inside that blogs folder add a page with the name [id].js. We will be using dynamic routes to showcase each post. If you want to learn more about dynamic routes, I would suggest you to read this. https://nextjs.org/docs/routing/dynamic-routes

To summarize dynamic routes.

Next.js allows you to create dynamic routes for the files inside square brackets.

So since we have [id].js in posts folder, the page will be called when we call URL localhost:3000/blogs/1243 . Since the route is dynamic anything after /blogs/ will call [id].js.
Further in this tutorial we will create static page for each posts using getStaticProps() and getStaticPaths().

Moving on, clear the existing code from index.js file. Once done your index.js file should look like this.

export default function Home() {
  return (
    <div>

    </div>
  )
}

So after doing all this you would be left with something like this.

Creating Dummy Markdown posts

We need at least 2 posts to show on our website and test it. So lets quicky create them.

Copy the following dummy code and create two files in posts directory. Name the files by the title name since we will be using the file name as ‘url parameter’. For example localhost:3000/blog/first-post

I am creating two files with same content but only changing the title so that I can distinguish them.

Name of my files is first-blog and second-blog. Remember to use .md extension.

---
title: 'My First Blog of 2022'
metaTitle: 'My First blog of 2022'
metaDesc: 'How to make a blogging website using Next.js, Markdown and style it using TailwindCSS.'
socialImage: images/pic1.jpg
date: '2022-02-02'
tags:
  - nextjs
  - personal
  - health
  - work
---
# The main content
# One morning, when Gregor Samsa woke from troubled dreams.
One morning, when Gregor Samsa woke from troubled dreams, he found himself *transformed* in his bed into a horrible  [vermin](http://en.wikipedia.org/wiki/Vermin "Wikipedia Vermin"). He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover **strong** it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, link waved abouthelplessly as he looked. <cite>“What's happened to me?”</cite> he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>

## The bedding was hardly able to cover it.

---
title: 'My Second Blog of 2022'
metaTitle: 'My Second blog of 2022'
metaDesc: 'How to make a blogging website using Next.js, Markdown and style it using TailwindCSS.'
socialImage: images/pic2.jpg
date: '2022-02-02'
tags:
  - nextjs
  - personal
  - health
  - work
---

# The main content

# One morning, when Gregor Samsa woke from troubled dreams.
One morning, when Gregor Samsa woke from troubled dreams, he found himself *transformed* in his bed into a horrible  [vermin](http://en.wikipedia.org/wiki/Vermin "Wikipedia Vermin"). He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover **strong** it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, link waved abouthelplessly as he looked. <cite>“What's happened to me?”</cite> he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>

## The bedding was hardly able to cover it.

I have added lot more content below it. You can skip it as it doesn’t make any difference.

The top part between “- - -” and “- - -” is called as Frontmatter. It is basically the meta data and will not be rendered.

Creating the Website and Styling it using Tailwind CSS

For the sake of the blog we are going to make just a basic not so fancy website with minimal styles. But you are free to use your creativity. We will create a home page which will list all the blogs and a blog page which will show individual blog contents. So lets start

Create a reusable layout component in components folder and import it in _app.js file.

Layout.js

import Link from "next/link";

function Layout({children}) {
  return (
    <div className="w-full min-h-screen ">
      <div className="flex flex-row h-16 justify-around align-middle">
        <h1 className="my-auto text-2xl font-mono">Simple Blog</h1>
        <Link href={`/`}>
          <a className="my-auto">Github Code</a>
        </Link>
      </div>
      <div className="container md:w-3/5 w-5/6 mx-auto mt-16">
        {children}
      </div>
    </div>
  );
}

export default Layout;

We have created a simple layout where we have kept a header and we will be rendering the children below it.

Import this Layout.js component in _app.js file.

_app.js

import Layout from '../components/Layout'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
    <Component {...pageProps} />
  </Layout>
  ) 

}

export default MyApp

Now, we will create a reusable Blog card component to show the blogs on the index.js page. So lets create a component Blogcard.js in components folder.

Blogcard.js

import Link from "next/link";

function Blogcard() {
  return (
    <div className="container w-100 mx-auto mb-16">
      <img
        className="w-3/4 rounded-lg mx-auto drop-shadow-lg"
        src="https://images.pexels.com/photos/675764/pexels-photo-675764.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
      />
      <Link href={'/'}>
        <h1 className="text-4xl font-semibold mt-4">
          Here is my first blog of the website
        </h1>
      </Link>
      <p className="text-gray-600 text-sm">2 Feb 2022</p>
      <p>
        This is just a static blog written to test the component structure.This
        is just a static blog written to test the component structure. is just a
        static blog written to test the component structure.
      </p>
    </div>
  );
}

export default Blogcard;

Currently for styling purpose I have added dummy static data and images here. Once we import the markdown files we will add posts data dynamically. For now to test how our blog will appear, add some dummy data.

Import Blog card in index.js file

index.js

import Blogcard from "../components/Blogcard";

export default function Home() {
  return (
    <div>
      <Blogcard />
      <Blogcard />
    </div>
  );
}

So now we have created the overall structure of our websites. Now we have to render the posts content on the page.

Loading the Posts on our Homepage

Go ahead and create a images folder in public folder. We earlier used social images in our markdown, this is the folder where we will store all the images. I am naming the images as “pic1” and “pic2” because that’s what I have named them in markdown files. I have 2 beautiful images imported from Pexels.

In order to extract the content we would need a package named gray-matter. So let’s install it using “npm”.

npm install gray-matter

What gray-matter does?

“Parse front-matter from a string or file. Fast, reliable and easy to use. Parses YAML front matter by default, but also has support for YAML, JSON, TOML or Coffee Front-Matter, with options to set custom delimiters. Used by metalsmith, assemble, verb and many other projects.”

Now open your index.js file. We will import the markdown content and parse it using gray-matter here.

Add these import statement in index.js.

import fs from 'fs'
//FS to read files 
import matter from "gray-matter";

Now we will use getStaticProps() method which is a Data Fetching method which runs only during build time and passes props to the page.

export async function getStaticProps(){
  // Getting all our posts at build time

  // Get all the posts from posts folder
  const files = fs.readdirSync("posts");

  // Loop over each post to extract the frontmatter which we need
  const posts = files.map((file) => {
    // getting the slug here which we will need as a URL query parameter
    const slug = file.replace(".md", "");
    // Reading the contents of the file
    const filecontent = fs.readFileSync(`posts/${file}`, "utf-8");
    const parsedContent = matter(filecontent);
    //The parsed content contains data and content we only need the data which is the frontmatter
    const {data} = parsedContent
    return {
      slug,
      data,
    };
  });

  return {
    props:{
      posts
    }
  }
}

If you want to learn more about Data Fetching in Next.js, make sure you read my other blog.

Here we are getting the slugs from the name of the file. Slugs will serve as the Url Parameter for loading each post. Then we are reading the data from each file and parsing it using gray-matter. We de-structure the data from the content since we only want the data which is the frontmatter(meta data) from the posts right now. Then we are collecting all the data in posts array and returning it as props to the index.js page. Use console log statements to understand better which line returns what.

Lets now collect the data in index.js page and pass it to the ‘Blogcard’ component.

import Blogcard from "../components/Blogcard";
import fs from 'fs'
import matter from "gray-matter";

export default function Home(props) {
  const {posts} = props
  return (
    <div>

      {posts.map((post,index)=>(
        <Blogcard key={index} post={post} />
      ))}

    </div>
  );
}
export async function getStaticProps(){
  // Getting all our posts at build time

  // Get all the posts from posts folder
  const files = fs.readdirSync("posts");

  // Loop over each post to extract the frontmatter which we need
  const posts = files.map((file) => {
    // getting the slug here which we will need as a URL query parameter
    const slug = file.replace(".md", "");
    // Reading the contents of the file
    const filecontent = fs.readFileSync(`posts/${file}`, "utf-8");
    const parsedContent = matter(filecontent);
    //The parsed content contains data and content we only need the data which is the frontmatter
    const {data} = parsedContent
    return {
      slug,
      data,
    };
  });

  return {
    props:{
      posts
    }
  }
}

We are receiving the data from getStaticProps() function and extracting posts array from it. We are then mapping the array and passing each item from the array to “Blogcard” component.

In “Blogcard” we are extracting the data and rendering it.

Blogcard.js

import Link from "next/link";

function Blogcard({post}) {
    console.log(post)
  return (
    <div className="container w-100 mx-auto mb-16">
      <img
        className="w-3/4 rounded-lg mx-auto drop-shadow-lg"
        src={post.data.socialImage}
      />
      <Link href={`blog/${post.slug}`}>
        <h1 className="text-4xl font-semibold mt-4">{post.data.metaTitle}</h1>
      </Link>
      <p className="text-gray-600 text-sm">{post.data.date}</p>
      <p>{post.data.metaDesc}</p>
    </div>
  );
}

export default Blogcard;

So if everything goes well you will be getting your two posts on your home page. If you get any error please check the data that you are passing has reached the component or not. Use console logs to test every code segment.

Output

Creating Individual pages for Blogs

Now lets create individual pages for each blog. We will create one page which will run for each post and using getStaticProps() and getStaticPaths() we will generate individual static pages for each post.

This is what my [id].js looks like. I renamed the function Blog.

export default function Blog() {
  return <div></div>;
}

So open our [id].js page in blog folder and add the following code.

Import gray-matter and filesystem(fs)

import fs from 'fs';
import matter from 'gray-matter';

getStaticPaths()

export async function getStaticPaths() {
  // Get all the paths from slugs or file names
  const files = fs.readdirSync("posts");
  const paths = files.map((files) => ({
    params: {
      id: files.replace(".md", ""),
    },
  }));
  console.log("paths",paths)
  return {
    paths,
    fallback:false
  }
}

So in this function we are generating an array of all the valid paths. These paths are slug names which will load blog posts for that name. And we then return these paths along with fallback as false. Fallback will show 404 page for wrong URL’s. Read more about getStaticPaths() here

getStaticPaths()

export async function getStaticProps({params:{id}}){
    const fileName = fs.readFileSync(`posts/${id}.md`, "utf-8");
    const { data: frontmatter, content } = matter(fileName);
    return {
      props: {
        frontmatter,
        content,
      },
    };
}

This function is similar to the function we wrote in index.js page for fetching list of blogs. The only difference is here we are finding one post by taking in the id passed in the URL and returning the entire post to the page. Lets put some console log and check it we are receiving the content.

export default function Blog({ frontmatter ,content}) {
  console.log(frontmatter)
  console.log(content);

  return <div></div>;
}

Hurray! We got the content! But wait the content that we fetched is in markdown format we cant directly show it here. For that lets install markdown-it.

npm i markdown-it

This package will convert markdown into HTML code which we can then render on our webpage.

Add some classes and render the content as below:


import fs from "fs";
import matter from "gray-matter";
import md from 'markdown-it'

export default function Blog({ frontmatter ,content}) {

  return (
    <div>
      <img src={`/${frontmatter.socialImage}`} className="w-3/4 mx-auto" />
      <div className="">
        <h1 className="text-3xl">{frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: md().render(content) }}></div>
      </div>
    </div>
  );
}

We are using “dangerouslySetInnerHTML” to apply our HTML content in our webpage.

Now your first impression is the content is rendered but something looks off. Yes the typography isn’t right yet. Don’t worry Tailwind is here to save us. Install this tailwind typography plugin.

npm install -D @tailwindcss/typography

Using this plugin you can give a “className” as “prose” to a div and it will style everything inside that div in a proper way.

Once installed add it to the tailwind.config.js file

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography")],
};

Now give className as prose to the outermost div of the rendered content.

So finally your [id].js file should something like this.

import fs from "fs";
import matter from "gray-matter";
import md from 'markdown-it'

export default function Blog({ frontmatter ,content}) {

  return (
    <div className="w-100">
      <img src={`/${frontmatter.socialImage}`} className="w-3/4 mx-auto" />
      <div className="prose w-3/4  mx-auto">
        <h1 className="text-3xl">{frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: md().render(content) }}></div>
      </div>
    </div>
  );
}

export async function getStaticPaths() {
  // Get all the paths from slugs or file names
  const files = fs.readdirSync("posts");
  const paths = files.map((files) => ({
    params: {
      id: files.replace(".md", ""),
    },
  }));
  console.log("paths",paths)
  return {
    paths,
    fallback:false
  }
}

export async function getStaticProps({params:{id}}){
    const fileName = fs.readFileSync(`posts/${id}.md`, "utf-8");
    const { data: frontmatter, content } = matter(fileName);
    return {
      props: {
        frontmatter,
        content,
      },
    };
}

And yes you have finally created your personal Blog using Next.js and Markdown. You can use your own creativity and style it.

Blog on my personal portfolio is also built using the same method. Check it here.

Portfolio

I am linking the link for GitHub repository here for you to reference! Thank you for reading. Follow me on twitter, I regularly post content about Web Development and Programming. Happy Coding!

GitHub - anuraggharat/Simple-Blog:

Data Fetching in Next.js

Anurag Gharat — Sat, 14 May 2022 15:33:55 +0000

If you have been using React.js you should be familiar with Client Side Rendering(CSR). To explain it in short, CSR is when the Site is built and assembled on the Client Side. So the entire App is loaded and rendered in the Client Side which is the browser. Data fetching takes place in the browser itself. Since React only supports CSR, it has some limitations. Here comes Next.js.

Next.js is a React Framework for creating Server Side Rendered Apps.

Next.js provides 4 different ways to Fetch data.

Data Fetching during build time - Static Site Generation (SSG)
Data Fetching during request time - Server Side Rendering (SSR)
Data Fetching based on condition - Incremental Site Regeneration (ISR)
Data Fetching on Client side - Client Side Rendering (CSR).

Before we start I have already created a Demo of data fetching in Next.js. You can check it here

https://data-fetching-in-next-js-1za1z1g0g-anuraggharat.vercel.app/.

Static Site Generation (SSG):

This is also called as Build time data fetching. Here we fetch the data at the Build time of the site and add it to the page. Hence we get a page which is already loaded with data. For performing build time data fetching we use getStaticProps() method. During the build process of the website, the data is fetched by the getStaticProps() method and passed onto the page. Using this data the page is completely built and then served statically. The page will not be build again until a new build is triggered. So the data won’t be refreshed and updated. getStaticProps()runs at build time only. The end result here is a static site generated at build time which is ready to be served.

Code Example:

//Export this function under your page which you want to render statically
export async function getStaticProps(context) {
  //Make API call here 
    const res = await fetch(`your API url`);
    const data = await res.json();
  return {
    props: { data }, // will be passed to the page component as props
  };
}

Benefits:

Fast load time since the page is already generated.
Better SEO since the contents of page is available even before the user requests.
Can be used for Static Side Generation.

When to Use?

When you want the data to be ready before the user requests it.
When the content is not going to change.
When SEO and Performance is the top most priority for that page.
When the data is available at Build Time.

Use Case:

Consider you are building a portfolio website that renders markdown blogs at build time. In such case you can use getStaticProps() to read the blogs and create a Blog page on build time. So next time when you add a new blog, the website is built again and new blogs are shown.

You can combine getStaticProps with getStaticPaths to create pages for dynamics routes. For example. Lets say you have a blog page on URL “yoursite.com/blog” which lists down all the blogs and a specific blog page “yoursite.com/blog/name-of-blog” which is a dynamic route which shows a specific blog. In such case you can use these two functions to create all the dynamic paths at build time, create pages for it using getStaticPaths and fill it with content using getStaticProps . All this on build time. So in the end what you have is a website with several Static pages corresponding to each individual blog. My personal portfolio uses this approach.

Refer this demo for understanding about Static Props and Static Paths.

https://data-fetching-in-next-js-1za1z1g0g-anuraggharat.vercel.app/

Server Side Rendering (SSR):

Use getServerSideProps() to fetch data on Server on each user request. This function fetches data on every user request on the server. A user requests a page, the server finds a page for that URL, builds it by fetching data and returns back the page. Since the page uses server side rendering, the data is fetched at the server and data is passed as props to the page .Page accepts the props and is built on the server and then returned back. So for every new request, page is built again. Since a completely assembled page is returned the users can directly start interacting with it. getServerSideProps()runs on each request on the server side only.

Example code:

//Export this function under your page which you want to render on server
export async function getServerSideProps(context) {
  //make your API request here
    const res = await fetch(`your API Url`)
  const data = await res.json()

  return {
    props: {}, // will be passed to the page component as props
  }
}

Benefits:

The page is available for user interaction instantly.
The page remains updated because the page is built on every request.
Great for SEO.

When to use:

When you wish to show a page which has data that is updated frequently.
When you want the data to be available to user as soon as the page loads.

Use Case:

Lets say you are creating a E Commerce website. On Shopping page the content gets updated every day based on inventory. Hence you could use Server Side Fetching Method which builds the page every time a user requests it. The user will be served with a page with the most up to date content.

Incremental Site Regeneration:

This is a combination of Server Side Rendering and Static Site Generation. Here the data is served statically but based on a certain condition or time the pages are rebuilt. This approach allows you to create updated static pages after you have built your site.

To use Incremental Site Regeneration add a revalidate prop to getStaticProps() method .

Example Code:

export async function getStaticProps(context) {
//make API calls here
  const { data } = await fetch(`Your url`);
  return {
    props: { data }, // will be passed to the page component as props
        revalidate:30 //The page will be built again in 30seconds
  };
}

The static page is built on Build time and served to the user when the user requests. When the user again requests the page after 30 seconds, Next.js starts rebuilding the page again. So after rebuilding the updated page is shown to the user. The old page still remains in the cache. If a user requests the page again before the 30 seconds window, the same old page is shown.

Benefits:

You are able to use SSG and SSR together.
Great for SEO and Performance.

When to use:

When you want speed of Static site but also wish to show updated data once in a while.
When the data is updated but not often.

Use Case:

ISR can be used when you want to scale up a static site. In this case you don’t have to build the static site when a new update is made. You can pass in a revalidate prop and the page will rebuild itself. This will help you in scaling your Static sites.

Client Side data fetching

This is the approach what a plain React app uses. In this approach we fetch the data on the Client side of the application. Since the page is assembled on the client side we call this approach as Client Side Rendering. To handle CSR in next.js we use useEffect() hook. The useEffect() hook runs when the component loads. You can add your data fetching methods in useEffect() hook to perform data fetching on Client Side.

Example Code

const [users,setUsers] = useState(null)

    const fetchData=async()=>{
        try {
            const { data } = await axios.get(
              "https://jsonplaceholder.typicode.com/users"
            );
            setUsers(data)
            console.log(data)
        } catch (error) {
            console.log(error)
        }
    }

    useEffect(()=>{
        fetchData()
    },[])

Benefits:

The page gathers data at the client hence there is less load on the server.
The page will always serve latest data.
Great for user interactivity.

When to use:

When your page has data which is updated very frequently(every minute).
Where user interaction with the data is more.

Use Case:

Dashboard built with React/Next.js use this approach. You can create a Dashboard page and once the page is assembled you can make a request for the data using the useEffect() hook. You can add a threshold to set the page refresh. Hence when the threshold is passed the page refreshes and new data is fetched.

Conclusion

We have now learnt 4 ways of fetching data in Next.js. All the ways completely different from each other and have their own pros and cons. And you know the best thing about Next.js??

You don’t have to choose one for your project! You can select one way for one page and other for another page. You can choose the way you wish to fetch data on the need of that page. So in your next Hotel booking website you can have your home page generated Statically while you can generate your Listings page dynamically on Server!

Thanks for reading. I hope you learnt something new today. If you still have any problem feel free to message me on my twitter.

How to Create a Custom Hook in React

Anurag Gharat — Mon, 18 Apr 2022 11:26:31 +0000

In earlier React versions only Class based components allowed to use and manipulate state. With introduction of Hooks in React 16.8 you can now manage state operations in Functional Components as well.

What are React Hooks?

Hooks are nothing but functions starting with use. As the name suggests these functions ‘hook’ onto your components. These hooks are functions that manipulate state for you. React comes with default pre built hooks like useState, useEffect , useContext and lot more. Each hook has a unique purpose. Here in this blog we will learn how to create our own Custom hook.

Why to create your own Hook?

Lets say you have a component which has some logic. This logic is being used across all your application components. So instead of repeating the code in every component that uses this logic, you can create a Hook that performs that logic and hooks onto the components that need it.

Hence hooks allow you to reuse your logic across your application. This makes your code more readable, efficient and easy to maintain.

Creating custom Hook

Lets create a fresh react application. Open your terminal and paste the following command.

npx create-react-app customhooks

This will create a new React application for us.

For tutorial purpose we will create small application that fetches post from a remote API and shows the title of the posts on home page. We will use the Rest API provided by JSON placeholder. Here it the link for it.

First we will fetch the data without a custom hook. Clean up your App.js file and add the following code. We have created 3 states. Data to store data, loading to show loading state and Error to show errors. This is how usually people fetch data in React. We used useEffect hook to fetch data as soon as the component is loaded.

import { useEffect, useState } from 'react';
import './App.css';

function App() {

  const [data,setData] =useState(null)
  const [loading, setloading] = useState(false);
  const [error, setError] = useState(false);

  const fetchData=async()=>{
    setloading(true)
    try {
       const res = await fetch("https://jsonplaceholder.typicode.com/posts");
       const resdata = await res.json();
       setData(resdata);
    } catch (error) {
      setError(error)
    }finally{
      setloading(false)
    }
  }

  useEffect(()=>{
    fetchData();
  },[])

  return (
    <div className="App">
      <h1>Custom Hooks in React JS</h1>
      {loading && <h1>Loading</h1>}
      {error && <h1>Something went wrong</h1>}
      {data && data.map(item=>(<p key={item.id}>{item.title}</p>))}
    </div>
  );
}

export default App;

Run the application using npm start command and the output should be similar to this.

Now we will create a Custom hook named useFetch that will fetch data for us. We will pass URL to the hook and the hook will return us data, error and loading state. Since we pass URL as a parameter we can reuse this hook in every component where we want to fetch data from a Rest API.

I created a Hooks directory and made a JS file with the name useFetch . This is where all our custom hook code data should go.

💡 Custom hooks should always start with ‘use’.

Now we will take the code from our App.js file and put it in the useFetch.js file. Here is final code of useFetch.js .

import { useEffect, useState } from "react";

export function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setloading] = useState(false);
    const [error, setError] = useState(false);

const fetchData = async () => {
  setloading(true);
  try {
    const res = await fetch(url);
    const resdata = await res.json();
    setData(resdata);
  } catch (error) {
    setError(error);
  } finally {
    setloading(false);
  }
};

   useEffect(() => {
     fetchData();
   }, []);

  return [data,loading,error]
}

After completing our hooks lets remove the unwanted code from App.js file and call the useFetch.js hook. We pass the URL as a parameter to the hook.

import './App.css';
import { useFetch } from './Hooks/useFetch';

function App() {

  const [data, loading, error] = useFetch(
    "https://jsonplaceholder.typicode.com/posts"
  ); 

  return (
    <div className="App">
      <h1>Custom Hooks in React JS</h1>
      {loading && <h1>Loading</h1>}
      {error && <h1>Something went wrong</h1>}
      {data && data.map(item=>(<p key={item.id}>{item.title}</p>))}
    </div>
  );
}

export default App;

Now again run the application and it should show the same output as it showed it earlier.

That’s for the blog. We saw how to create a Custom Hook. Similar to this you can create even more hooks that perform tasks which are repeated across your components.

Thank you for reading! If you loved the blog, do like it and share it. I post many such tweets about Web Development and Programming on Twitter, you can follow me if you love such content! Thanks!

Deploying your Next.js Application

Anurag Gharat — Mon, 04 Apr 2022 19:43:47 +0000

There are many platforms to host your Next.js app. Out of them, I prefer Vercel. Vercel is the fastest way to host your Next.js application and it directly gets connected to your GitHub. So every time you create a new commit to your project, the build process is triggered and a new version is automatically deployed.

And along with this, there are other numerous features provided by Vercel team such as Monitoring, Build Previews, HTTPS and SSL Certificates, Env Variables and using Custom domains. All these features come free thanks to Vercel. And if you don’t know it already, Next.js is created and maintained by Vercel Team!

So now lets get into the process.

Push your project on GitHub:

Create a repository on GitHub for your project. The process is quite simple, just log in to your GitHub account and click on new repository.

You can keep the repository public or private your choice. Once done, you need to push your project to GitHub. The steps will be given when you create the repository. You just need to commit all changes and push to your branch.
If you find those commands confusing, run the following commands one by one.

git commit -m "Ready for Deployment"
git remote add origin "URL for your git origin"
git push -u origin main

These are the same commands which your repository must be showing.

Connecting Vercel with your GitHub account:

Now head over to Vercel from the below link and create your account using GitHub.

https://vercel.com/

Once you authorize your account you will be redirected to your Dashboard.

The dashboard should be similar to this. I have 4 projects running so you can see them but for you, it must be blank.

Click on New Project

You would see a page showing all your projects available on GitHub. If you can’t see anything, there will be a button to connect Vercel with your GitHub. Click on that button and allow Vercel access to your GitHub.

Choose your project which you wish to deploy. You can put your name for the project here. Make sure you give a good name because this name appears in your deployed URL.

Leave everything else blank. ( If you have a different configuration for Build and Install command you can edit it). For basic App you can leave it blank.

Now if you use any environment variables in your project, Click on Environment Variables setting below.

Here you can set your environment variables which you set using .env file in development mode. Make sure you use the same variable name.

Important!

If you have any environment variable that is used on the browser side , you need to prefix the variable with NEXT_PUBLIC_ . By default env variables are only available in Node.js environment hence to access it on browser we should use this prefix.

Now since we have configured everything you can click on deploy and watch Vercel do its magic!

After a couple of minutes, if you are lucky and there are no errors your site will be deployed successfully! You will be redirected to your Site Dashboard. If you encounter any problems during deploy check the build logs. You can find those logs on deployment tab. Check the logs find the bug, resolve it and push a new commit. Vercel will automatically detect a new commit and start building the site again.

My project got deployed successfully and here it is!

https://next-js-portfolio-weld.vercel.app/

Thank you for reading! If you loved the blog, do like it and share it. I post many such tweets about Web Development and Programming on Twitter, you can follow me if you love such content! Thanks!

PWA with Next.js

Anurag Gharat — Thu, 24 Mar 2022 17:28:06 +0000

What is PWA?

PWA stands for Progressive Web Apps. A PWA Web App can be installed as an Application on any device and work as a Native App on that platform.

Earlier you had to maintain separate codebase for Web App, Android App and IOS App. But now using PWA you can turn any of your existing Web App or Website into Installable App and use it on any Platform. How cool!

Benefits of PWA?

You can use it as a Native App.
Super Fast and reliable.
Provides Offline Support.
Install directly from Website or Distribute as a SDK.
Cheaper to Build and Deploy.

Examples of PWA

Twitter is an amazing example of PWA. Head to https://twitter.com/ and notice an icon appearing on the right on the URL box. This icon suggests that the Twitter Website is installable. Go ahead and install it. Now no matter if you are on your phone or computer you can see a twitter app on your screen. Open it. As you can see, you are getting a Native App like experience from a website. You can also use native app features like upload pictures and videos.

Convert your Next.js App into a PWA:

So lets start by adding PWA features to our existing Next.js App. If you are not having a ready project you can clone this Repository. This GitHub repository has two branches, make sure you clone the starter one.

GitHub - anuraggharat/Next-PWA-Demo at starter

Or just run this command to clone the repository in the terminal.

git clone -b starter https://github.com/anuraggharat/Next-PWA-Demo.git

Installing necessary dependencies

Open the terminal inside your app and install next-pwa.

npm i next-pwa

Generate Manifest file

A Manifest file is a JSON file which contains Meta data and icons about your application. You can write your own manifest.json file or you can even generate your file using an online tool. I’ll choose a tool here. Below is a list of all Online manifest generators, in this tutorial I am choosing the first one.

https://www.simicart.com/manifest-generator.html/

https://manifest-gen.netlify.app/

https://app-manifest.firebaseapp.com/

Add various details of your App like Name, Short Name, Theme Color and description.

You can choose which type of display you want for you App. Browser makes it open in a separate browser, Standalone makes it looks like a native App. Full Screen display type makes the app open in Full screen mode and Minimal UI type is similar to Native app but some browser features are retained.

For your App to be recognized it should have icons of fixed sizes. I have downloaded a simple icon which I will use here for demo purpose. Try selecting an icon of size 512px. Once you have uploaded the icon, click on generate. This will give you a zip folder , extract all the content of the folder and copy all the contents inside the folder to your public directory inside your App. Rename manifest file to manifest.json.

This is how your folder structure should look like.

Your manifest file should be similar to this:

{
    "theme_color": "#3579f6",
    "background_color": "#ffffff",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "Next-PWA",
    "short_name": "Next-PWA",
    "description": "A Demo for Next-PWA",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Create _document.js file

Now create a _document.js file in your pages directory and paste the following code. **document.js file is a special file in next.js just like _app.js. So if you have used Next.js you know we don’t write <body>,<script> and <head> tags by ourself. But if you go inside the inspector in browser you can see a whole bunch of script, link tags along with body and head tags. All these tags are generated by Next.js for us. _document.js allows us to control these tags ourself. So if you wish to add a link to external CSS or a script tag referencing a animation JS library you can create a _document.js file add them there. Here we are using _document.js file to reference our manifest files and icons.

_document.js file is loaded and run on server so don’t add event handlers here.

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/icon.png"></link>
          <meta name="theme-color" content="#fff" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Making Configuration in next.config.js file:

Next.js provides a default configuration file where we can set all our configurations. Open the next.config.js file and paste the following code.

const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
  },
});

Make a Local build and test the PWA:

Once you have completed writing the configurations we can test the App. To test the PWA locally lets first create a new build. Stop the terminal and use this command to create a build:

npm run build

Once the build is created you would see a couple of files in your public folder.

sw.js and workbox-1846d813.js

sw.js file is a Service Worker file. Service Worker is used in performing Caching, Background sync, Providing Native features and Offline Support. Workbox file is used to perform caching of assets.

Ok so you have created a new build now lets run this build locally.

npm run start

Head over to localhost:3000 and in the right corner of URL box you can see a installable icon. Click on the icon. Now you can search for the App in your computer and run it.

Adding favicon to your website

A favicon is a small icon displayed on the left of the website title browser. This icon gives identity to your website. Currently your website has default next.js favicon lets change and ours. Head over to favicon generator website.

favicon-generator.org

https://favicon.io/favicon-converter/

Upload our icon which we selected earlier and convert it into a favicon. Download the zipped folder, unzip it, find the favicon.ico from the folder and replace it with the favicon from our projects public folder. Ignore all the other files from unzipped folder.

Now before we host our application lets finish some final configuration. Now the files generated by the build command aren’t necessary to be pushed on GitHub. Because these files are auto generated files and will be generated again every time we build the App. So when we deploy to a hosting platform, the platform will generate the files for us using latest configurations. So lets add these autogenerated files in .gitignore file. If you don’t already know .gitignore file tells git which files to ignore while committing a new commit.

# Auto Generated PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map

And along with that we also with to disable PWA in development mode while we work on our App. For that we will update our next.config.js file to this

const withPWA = require('next-pwa')

module.exports = withPWA({
  reactStrictMode: true,
  pwa:{
    dest:"public",
    register:true,
    skipWaiting:true,
    disable:process.env.NODE_ENV === 'development'
  }
});

We have added a disable as true if the environment is Development. And yeah that’s all you need to do to add PWA to a basic Next.js App. Now you can host your App on your favorite hosting platform and check how it works on mobile devices!

Here’s what the final App looks in my phone!

Final Demo here. https://next-pwa-demo-eight.vercel.app/

That was how you can convert you Next.js website into a PWA App. Thanks for reading! If you love such content make sure you follow me on twitter. I post regular content on Web Development and Programming.

Adding Bootstrap to Next.js

Anurag Gharat — Wed, 23 Mar 2022 18:41:41 +0000

In my opinion Bootstrap is still the OG of CSS frameworks. I love it because of it's simplicity and readymade components like Navbar, Cards, Modals and much more. Even with Tailwind, Chakra out there Bootstrap is still being used by a lot of Front end developers. Now Bootstrap has got even more powerful with Version 5.

Adding Bootstrap to your React or a basic HTML file was a simple straight forward task. You run the installation using npmor just add the CDN links in the HTML file. But the process is not that simple when in Next.js.

Bootstrap can be added to your Next.js application in two different ways. Choose the one which you prefer

Using CDN
Installing using NPM

Using CDN links:

Bootstrap 5 got rid of jquery so we only have to add the JS, Popper and CSS.

Go ahead and open up your Next.js project in your Favorite code editor.

Now Next.js does not have a index.html file unlike regular react application where you can add the Link and Script tags. So here we have to use _app.js and _document.js files. These are custom App and Document components which are used to initialize pages. _app.js is already created in your file, just create _document.js alongside the _app.js in the pages folder. Now paste the following code in _document.js file.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

As you can see we have added the Bootstrap stylesheet here. <Head /> is the custom component by Next.js which compiles down to <head/> of our plain HTML. If you have other CSS styles or external icon links you can add them here as I have shown in below example.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />
                {* Bootstrap Icons *}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"></link>
                    {* Google Fonts *}
                <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Now you can test your application with some simple Bootstrap classes. It will work without any issues. But Bootstrap components like Modal, Navbar etc won’t work since they require JS and Popper and we haven’t imported them yet.

We can’t add the Bootstrap script which contains JS and Popper here in _document.js file because Next.js recommends us to add only stylesheets in custom Document component and all the external scripts should be added in custom App component only. Consider it as a best practice.

If you want to read more about the topic, check their documentation here.

stylesheets-in-head-component | Next.js

Change the _app.js code to this.

import Head from "next/head";
import Script from "next/script";
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>

      <Script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossOrigin="anonymous"
      />
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

And all done, You can now start using Bootstrap in your project!

Installing Bootstrap using NPM

The second way to install bootstrap is using npm( Node Package Manager). Open terminal inside your project and install Bootstrap 5 using this command.

npm i bootstrap

Once bootstrap is installed we have to import the Bootstrap CSS in _app.js. We import the CSS in App component because App component is rendered for every page. So you don’t have to import CSS in every page.

import 'bootstrap/dist/css/bootstrap.css';

Now you can go ahead and use bootstrap’s CSS features but you won’t be able to use JS since we haven’t imported it yet!

Importing JS is not easy as CSS. If we directly import JS like CSS we will run into error which would say window and document is not defined. This is because window and document are client side objects, while Next.js renders HTML on Client side as well as server side. Hence to avoid such errors we will dynamically import JS using useEffect() hook. Look at the below code.

useEffect(()=>{
        import("bootstrap/dist/js/bootstrap");
},[])

Add the following code in your _app.js file. Now you will only import JS when the page is loaded on the browser.

Use Effect hook only runs on Client side i.e in the Browser.

This was all about Adding Bootstrap to your Next.js application.
Thanks for reading! If you love such content make sure you follow me on twitter. I post regular content on Web Development and Programming.

How to use React Context API

Anurag Gharat — Fri, 11 Mar 2022 07:25:54 +0000

Passing data down the Multiple layers of components in React is a tough. React’s useContext() hooks makes passing data from Parent Component and consuming it in a child component easy. useContext() hook belong to the Context API which is used for state management in React.

What is React Context API?

React Context readily makes data available to the components without manually passing it through the entire component tree. Context API is a simple alternative to Redux library. Both are used for Central state management. You can read about Redux in my other blog here.

Using Context you can maintain a central state and pass it in the form of props and extract it in the components where you need. This solves the problem of Props drilling.

How to use React Context API.

Using the Context API in React is a 3 Step Process.

Create the Context
Provide the Context
Consume the Context

Create the Context:

In the first step we create a context using the createContext(default) function. This function takes a optional parameter which is the default value.

import React from 'react';

const ApplicationContext = React.createContext()

The ApplicationContext object contains two properties, Provider and Consumer. Provider to provide the context(data) and consumer to consume the context(data).

Provide the Context:

Once we create the context, we wrap the child components inside the Provider. While wrapping we pass our central state values which we wish to consume in our child components. This value can be a String, Number or even an Array or Object. Here we are passing “Anurag” as a value. Here Main is the Component which contains further Component tree.

<ApplicationContext.Provider value="Anurag">
      <Main/>
</ApplicationContext.Provider>

Here is how my App.js file looks like after first two steps.

import React, { useContext } from "react";

const ApplicationContext = React.createContext();

export default function App() {
  return (
    <ApplicationContext.Provider value="Anurag">
      <Main />
    </ApplicationContext.Provider>
  );
}

Consume the context

Now use the Consumer in the Child component of the Component Tree to extract the copy of the state data. You can extract the data in two ways, using Consumer Component or by using the useContext() hook.

Using <ApplicationContext.Consumer/> :

 <ApplicationContext.Consumer>
          {user =><h1>{user}</h1>}
 </ApplicationContext.Consumer>

Using useContext() :

function Profile(){

  const user = useContext(ApplicationContext);

  return (
    <div>
      <p>Username : {user}</p>
      <UserCard />
    </div>
  )
}

Here is a complete example. Create a new react project add the following code in App.js. I have implemented the child components in the same file for simplicity.

import React, { useContext } from "react";

//Creating Context
const ApplicationContext = React.createContext();

export default function App() {

// Wrapping the Main component in Provider and passing the value
  return (
    <ApplicationContext.Provider value="Anurag">
      <Main />
    </ApplicationContext.Provider>
  );
}

function Main(){
  return(
    <div>
      <Profile/>
    </div>
  )
}

function Profile(){

//Using useContext()
  const user = useContext(ApplicationContext);

  return (
    <div>
      <p>Username : {user}</p>
      <UserCard />
    </div>
  )
}

function UserCard() {

//Using Context
    return(
      <div>
        <ApplicationContext.Consumer>
          {user =><h1>{user}</h1>}
        </ApplicationContext.Consumer>
      </div>
    )
}

Output:

Few important points to consider while using Context API:

Provider can only hold one value, and the value can be anything.
Only the Components that consume the data will re render on data change.
You will have to export the created Context.
You can create multiple contexts.

How to pass multiple value in Provider?

We can pass anything in the value prop of context, but we can pass only one prop. So in cases where you wish to pass multiple prop values in the Provider, you can club them together into one value variable and pass that as a prop.

Take a look at this example.

import React, { useContext } from "react";

const ApplicationContext = React.createContext();

export default function App() {

function changeUser(){
    //
}
const numbers=[1,2,3,4];
const obj = {name:"Anurag",id:101}

  return (
    <ApplicationContext.Provider value={{numbers,obj,changeUser}}>
      <Main />
    </ApplicationContext.Provider>
  );
}

Are Context API and Redux the same?

The answer is no. Context API and Redux aren’t the same even if they solve the same problem i.e Prop Drilling. Context API is a simple alternative of Redux and should be used in places where Redux will be a overkill. Redux is a complete State management library which comes with features like middlewares, Reducers, Dev tools etc. Use Context API where you wish to avoid passing state through various Component levels.

Thanks for reading! If you love such content make sure you follow me on twitter. I post regular content on Web Development and Programming.

A Simple Introduction to Redux!

Anurag Gharat — Tue, 08 Mar 2022 17:15:51 +0000

If you have you ever made a JavaScript application chances are you would have come across a time when handling the state of your application would have become unmanageable. In this case you would have looked for state management libraries and left it learning halfway as it was complex and difficult. So this is a small tutorial for you to learn the basics of Redux and what you need for it as a prerequisite?? Nothing!! Just basics of JavaScript and a code editor offcourse!

What is Redux ? And why do we need it?

Redux is a predictable state container for JS apps, that’s what the documentation says. But to understand it in a simpler way

Redux is a State management Library for managing state of JavaScript apps on the Front-End

Redux provides us a central store where you can store the state of the app and extract it an any component of the app. As Redux is a State Management Library you can use it with any of your preferred Front-End framework like React, Angular, Vue or even with bare minimum JavaScript app.

As our JavaScript apps grows bigger and more components are added to it, at some point it becomes difficult to manage the central state of the apps and keeping all states in sync. That’s where Redux comes to the rescue. In normal apps let’s say in a React-App you would have to manage state on a component level and pass it via props in all child components that would consume the state. In Redux you maintain a central state of the app (redux store) and any component can access it at any level. Every component has the power to change the state of the store and the resulting action will lead to change in the states of all the component that consumes the central state.

Getting Started

So first things first, create a folder by any name of your choice and open it in your code editor. Now open the terminal in you project folder and initialize a package.json using the following command.

npm init -y

The “y” stand as a yes for all. Now as our project folder is ready we will go on to install redux in it.

npm i redux

Now create a index.js file and type console.log(“Hello World”) in it and run the file from the terminal using node index.js to test if its working.
I am assuming you have node installed on your machine. If not go onto the official docs and install it , its a pretty straight forward process.

Understanding the Principles of Redux:

The entire concept of redux depends on these three important principles:

The entire state of your application lies inside the redux store.
The only way to change the state inside the store is by emitting an action.
The reducers are pure functions that specify how the state should change.

Writing your First Redux Application

const redux = require('redux');

So in your index.js file add this statement at the top which imports *redux * as **redux **in our file.

Set the initial state of app:

The initial state of our app is an object that has all the central data of our app. In this example the initial state of our app is

const initialState={
    friends:255,
    online:false,
    newMessages:6
}

Add this code below the import.

Create a reducer and pass the initial state to it:

A Reducer is a function that takes intialstate and action as parameters and returns the copy of modified state. Reducer is responsible for handling and changing the state of the application. What change must be made and what state must be set is defined by the action that is provided to it. The Reducer always returns the copy of the modified state. Reducer is a function consisting of switch cases for determining types of actions. Here we check the action type and return the changed state. Action is an object with type as an attribute, we will understand it next.

const reducer=(state=initialState, action)=>{
    switch (action.type) {
      case 'IS_ONLINE':
        return {
          ...state,
          online: true,
        };
      case 'ADD_A_FRIEND':
        return {
          ...state,
          friends: state.friends+1,
        };
      case 'READ_A_MESSAGE':
        return {
          ...state,
          newMessages: state.newMessages-1,
        };
      default:
        return state
    }
}

Action Creators:

Action creator are functions that return an Action, and an Action is nothing but an object with a type and payload as attributes. The Action type determines what change in data should be made by the reducer and with payload you can pass the data object that your central state might need.
For Example: If in application your user logs in, you would create an action of type ‘USER_LOGGEDIN’ and pass the User’s Id or User Details with the payload . Now the reducers receives this payload and in the central state adds User’s Details . So now your entire application can access the User’s Details. As our application is small we won’t be using payload.

function isOnline(){
    return {
        type:'IS_ONLINE'
    }
}
function addFriend() {
    return {
        type: "ADD_A_FRIEND",
  };
}function readMessage() {
    return {
        type: "READ_A_MESSAGE",
  };
}

Create your Store:

As discussed earlier the entire central state tree of your application lies inside the store. Here we create a state tree of our application with createStore method and store it with variable store. We pass our reducer to the store so that it can access it.

const store=redux.createStore(reducer)

A store has various methods such as

getState():-
The getState() method returns the instance of the state. Here we call it before passing any action so it prints the initial state of our application.

console.log(store.getState())

subscribe():-
The store.subscribe() method subscribes us to a store and adds an onchange event listener. In simple words on every change the subscribe method will call a function passed as an argument. Here we log a statement on the console every time our state changes.

const changeListner = store.subscribe(()=>(console.log("state updated",store.getState())))

dispatch() :-
The dispatch method dispatches actions attributing the store. It triggers the state change with the action creator passed on to it. Here we are dispatching various action creators to alter the state. For every dispatch method we will get a logged statement on our console showing the state at that instance.

store.dispatch(isOnline())

So this is how our index.js file looks like after we implement all of the above steps.

const redux = require("redux");

const initialState={
    friends:255,
    online:false,
    newMessages:6
}

const reducer=(state=initialState,action)=>{
    switch (action.type) {
      case 'IS_ONLINE':
        return {
          ...state,
          online: true,
        };
      case 'ADD_A_FRIEND':
        return {
          ...state,
          friends: state.friends+1,
        };
      case 'READ_A_MESSAGE':
        return {
          ...state,
          newMessages: state.newMessages-1,
        };
      default:
        return state
    }
}

function isOnline(){
    return {
        type:'IS_ONLINE'
    }
}
function addFriend() {
    return {
        type: "ADD_A_FRIEND",
  };
}function readMessage() {
    return {
        type: "READ_A_MESSAGE",
  };
}

const store=redux.createStore(reducer)
console.log("-----------------------------------")
console.log("Initial State of Application",store.getState())
console.log("-----------------------------------");
const changeListner = store.subscribe(()=>(console.log("state updated",store.getState())))

console.log("GO ONLINE")
store.dispatch(isOnline())

console.log("Add a Friend");
store.dispatch(addFriend())

console.log("Add a Friend");
store.dispatch(addFriend());

console.log("Read a message");
store.dispatch(readMessage());

console.log("Read a message");
store.dispatch(readMessage());

changeListner()

Now go on to the terminal and run your application using

node index.js

This must be the output that you receive.

So now I am guessing you have understood the basic concepts of redux! Now go ahead and use it in your next project

Thank you for reading! Share if this blog helped you in understanding Redux. I post regular content on Web Development on Twitter. If you are interested in such content, make sure you follow me on anuraggharat.

How to add Tailwind CSS in Next JS?

Anurag Gharat — Mon, 31 Jan 2022 07:40:57 +0000

Hey, If you are looking for a CSS framework for you new Next.js Application, you should definitely take a look at Tailwind CSS.

What is Tailwind CSS ?

Tailwind is a powerful utility based CSS framework. Tailwind provides you a lot of CSS classes that you can use to build any of your designs. Developers love tailwind due to the Flexibility and Customization that the prewritten classes provide.

Here’s an example of creating a heading using Tailwind.

<div className="pt-32 text-sky-500 bg-slate-800 h-screen text-center">
      <h1 className="text-5xl">Hey! How are you?</h1>
</div>

The result should be something like this!

Setting up Tailwind in Next JS

Ok, so lets start by creating a fresh Next.js project.

npx create-next-app tailwindnext
cd tailwindnext

Once you create your new project you need to add Tailwind CSS using NPM. But before that you would need its peer dependencies like POSTCSS and AutoPrefixer. So lets add all the dependencies together.

npm install -D tailwindcss postcss autoprefixer

As all the dependencies are Dev Dependencies we use the -D flag.

Now we need to generate the config files. For that we will run this command.

npx tailwind init -p

This command will generate tailwind.config.js and postcss.config.js files. Once done add the following code in your tailwind.config.js file. We are configuring the template paths. We are mentioning pages and components here in the array.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And the last step, adding @tailwind directives to your global.css file. Move into ./styles/global.css and add the following code. This adds Tailwind CSS to your Global CSS.

@tailwind base;
@tailwind components;
@tailwind utilities;

And before we start our project lets check if Tailwind is properly installed. Remove all the code from your index.js page and add the following code.

export default function Home() {
  return (
    <div className='pt-6'>
      <div className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-gray-100 my-3 p-4 mx-auto ">
        <h1>Hello World</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
      </div>
    </div>
  );
}

The result should be something like this.

Go to localhost:3000 in your browser and check if the result is as shown above. If not check if you have imported global.css in you _app.js file.

Good Luck, and make something awesome using Tailwind!

I regularly post Web Development and Programming related content on Twitter. If you are interested do consider following me there. Thanks!! 😄

DEV Community: Anurag Gharat

Memoization in React

What is React.memo():

Best Practices

Wrapping Up

Git cheat sheet

Git Basics

Handling file changes

Handling branches

Working with Remote

Explain Git to a 5 year old!

How to create a Blog using Next.js and Markdown.

Markdown

Getting Started

Setting up the Project.

Creating Dummy Markdown posts

Creating the Website and Styling it using Tailwind CSS

Loading the Posts on our Homepage

Creating Individual pages for Blogs

Data Fetching in Next.js

Static Site Generation (SSG):

Server Side Rendering (SSR):

Incremental Site Regeneration:

Client Side data fetching

Conclusion

How to Create a Custom Hook in React

What are React Hooks?

Why to create your own Hook?

Creating custom Hook

Deploying your Next.js Application

Push your project on GitHub:

Connecting Vercel with your GitHub account:

PWA with Next.js

What is PWA?

Benefits of PWA?

Examples of PWA

Convert your Next.js App into a PWA:

Installing necessary dependencies

Generate Manifest file

Create _document.js file

Making Configuration in next.config.js file:

Make a Local build and test the PWA:

Adding favicon to your website

Adding Bootstrap to Next.js

Using CDN links:

Installing Bootstrap using NPM

How to use React Context API

What is React Context API?

How to use React Context API.

Create the Context:

Provide the Context:

Consume the context

Few important points to consider while using Context API:

How to pass multiple value in Provider?

Are Context API and Redux the same?

A Simple Introduction to Redux!

What is Redux ? And why do we need it?

Getting Started

Understanding the Principles of Redux:

Writing your First Redux Application

Set the initial state of app:

Create a reducer and pass the initial state to it:

Action Creators:

Create your Store:

How to add Tailwind CSS in Next JS?

What is Tailwind CSS ?

Setting up Tailwind in Next JS

What is `React.memo()`: