How to add router progress bar in Next Js 13

#nextjs #webdev #route #progress

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



yarn add nextjs-toploader

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>
  );
}

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"
/>

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!