TheLazy.Dev
Portfolio GitHub

Blog

nextjs |webdev |route |progress

How to add router progress bar in Next Js 13

sabbir_zz

Sabbir Zzaman

Posted on August 21, 2023

How to add router progress bar in Next Js 13

route change progress bar example

Getting Started

If you've found yourself struggling to implement a reliable router progress bar for your Next.js 13 project, don't worry – I've got a straightforward solution for you. Many of the existing packages for creating a route change progress bar became ineffective with Next js App route. But after some extensive searching, I stumbled upon a fantastic option that not only works flawlessly but is also incredibly simple to integrate.

Assuming you already have your Next.js app or website project set up, the first step is to install the nextjs-toploader package. This package will be the key to achieving the progress bar functionality you're looking for.



npm i nextjs-toploader
Enter fullscreen mode Exit fullscreen mode

Or



yarn add nextjs-toploader
Enter fullscreen mode Exit fullscreen mode

In app/layout.js

Import the NextTopLoader component from the nextjs-toploader. And place the NextTopLoader component right above the {children} content, ensuring it's within the <body> of the JSX structure.



import NextTopLoader from 'nextjs-toploader';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Customization

Customize the router progress bar to your preferences is simple. Just add the desired props to the NextTopLoader component:



<NextTopLoader
  color="#2299DD"
  initialPosition={0.08}
  crawlSpeed={200}
  height={3}
  crawl={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
/>
Enter fullscreen mode Exit fullscreen mode

These props gives you control over various aspects, from color and animation speed to visual effects. Feel free to experiment and create a progress bar that aligns perfectly with your Next.js 13 project.

I hope the information provided here proves valuable in enhancing your Next.js 13 project. Adding a route change progress bar to your Next.js 13 project through the nextjs-toploader package is both easy and effective. If you have any further questions or need assistance, don't hesitate to reach out.

Happy coding!

💖 💪 🙅 🚩
sabbir_zz
Sabbir Zzaman

Posted on August 21, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to add router progress bar in Next Js 13
nextjs How to add router progress bar in Next Js 13

August 21, 2023