DEV Community

Cover image for How to add router progress bar in Next.js with one line of code 🤯
Avneesh Agarwal
Avneesh Agarwal

Posted on • Updated on • Originally published at blog.avneesh.tech

How to add router progress bar in Next.js with one line of code 🤯

The pages in Next.js are lazy-loaded so if you fetch some API or fetch data from a database it can take a few seconds to reach the second page. So to let the user know that the page is being loaded we will add a progress bar at the top of the screen. Here is how it will look-

https://www.loom.com/share/de44131850c743dcbbefc0e4f0e48b48

So let's get started

Creating a Next app

npx create-next-app next-progress-bar
Enter fullscreen mode Exit fullscreen mode

Installing the required dependency

npm i nextjs-progressbar # npm
yarn add nextjs-progressbar # yarn
Enter fullscreen mode Exit fullscreen mode

Creating the pages (for demo)

First, create a new file in the pages folder. This will create a new route for you.
I am naming it about.js. . I am just creating an h1 tag and a button that will redirect to the home page.

import Head from "next/head";
import { useRouter } from "next/router";

export default function About() {
  const router = useRouter();

  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <h1>About page</h1>
      <button onClick={() => router.push("/")}>Go to Home</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

I will do the same in index.js but redirect to the about page instead

import Head from "next/head";
import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();

  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <h1>Home page</h1>
      <button onClick={() => router.push("/about")}>Go to about me</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Adding the progress bar 📊

We will go to _app.js and add the NextNProgress component

import "../styles/globals.css";
import NextNProgress from "nextjs-progressbar";

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

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

And that is it! The progress bar is now working 🥳🎉.

Customizing the progress bar

You can add some props to NextNProgress like color, height, key, ref, startPosition, and many more. I mostly just change the color and height because I like the other stylings the default way they are. Here is how you can change the color and height-

<NextNProgress height={6} color="#4338C9" />
Enter fullscreen mode Exit fullscreen mode

This will make the progress bar thicker and purple in color. Feel free to try out different colors and styles. Drop your favorite style for the progress bar in the comments 👇🏻

Useful links -

Github repository

NextJS docs

NextJS progress bar

All socials

Top comments (8)

Collapse
 
rowjay007 profile image
rowjay007

This is really helpful

Collapse
 
adrrian17 profile image
Adrian Ayala

Hi Avneesh, your project is really cool.

I'm trying to remove the spinner like this but it doesn't work

<NextNProgress options={{ showSpinner: false }} />

Collapse
 
avneesh0612 profile image
Avneesh Agarwal
  <NextNProgress options={{ showSpinner: false }} />
Enter fullscreen mode Exit fullscreen mode

this should work. Try restarting your app

Collapse
 
adrrian17 profile image
Adrian Ayala

Thanks! I restarted the apps as you said and it worked! :D

Collapse
 
vineyrawat profile image
Viney Rawat

Really great 👍 I should use it for my next project.

Collapse
 
avneesh0612 profile image
Avneesh Agarwal

Next Next.js project haha

Collapse
 
adrrian17 profile image
Adrian Ayala

Hi Avneesh, your project is really cool.

I'm trying to remove the spinner like this but it doesn't work

Collapse
 
avneesh0612 profile image
Avneesh Agarwal

Hey, what have you tried?