Next13Progressbar

There are several ways to add a prograss bar for routing in Nextjs13, each with its own advantages and disadvantages. Here we are talking about one of the best approch which is very easy to use.

That is next13-prograssbar

This is a dedicated package specifically designed for handling progress bars in Next 13 and above.
It offers a simple API for configuring and dsplaying the progress bad based on routing events.
This approach is ideal for Next 13 projects seeking a straightforward solution without requiring custom logic.

Let's see the steps for how to implement progressbar in Next.js usingnext13-progressbar.

Step 1 : Install next13-prograssbar in you project.

npm i next13-progressbar

Step2 : After Installing the package, create providers.tsx file in your app directory to handle contexts and mark it use client. And import Next13ProgressBar as following.

'use client';
import React from 'react';
import { Next13ProgressBar } from 'next13-progressbar';

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <Next13ProgressBar height="4px" color="#0A2FFF" options={{ showSpinner: true }} showOnShallow />
    </>
  );
};

export default Providers;

Step3 : Now wrap your providers inside the body tag in your layout.tsx file.

import Providers from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

By default alla the anchor tags and routs should be handle by next/link . Thats it, you don't need to do anything.

If no props are passed to <Next13ProgressBar /> it will automatically use its default configuration.

<Next13ProgressBar color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />

You can see the progress bar like shown in the below video snippet.

Thanks for reading :). I hope you have learned something from this blog. 😊

How to add progress bar on the top of the page while routing between pages in Nextjs.