Add router progress bar in Next Js 14

Fabian — Wed, 27 Dec 2023 11:50:26 +0000

Get Started

I struggled to implement a loading indicator in my Next.js 13 and Now.js 14 apps. With the Next.js App router, many progress bar packages became ineffective. But after some research, I found a working package that was updated recently and works perfectly in the Next.js 14 app router.

It doesn't matter if you already have a fully functional Next.js app or are creating a new one. First you need to install the nextjs-toploader package.

npm i nextjs-toploader

yarn add nextjs-toploader

app/layout.tsx or app/layout.jsx

import NextTopLoader from 'nextjs-toploader';

export default function RootLayout({
  children
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang='en'>
      <body>
        <NextTopLoader /> // Just need to add this line
        {children}
      </body>
    </html>
  );
}

Customizations

To customize your progress bar you can add these props to your NextTopLoader and change the values.

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

color: to change the default color of TopLoader.
initialPosition: to change initial position for the TopLoader in percentage, : 0.08 = 8%.
crawlSpeed: increment delay speed in ms.
speed: animation speed for the TopLoader in ms
easing: animation settings using easing (a CSS easing string).
height: height of TopLoader in px.
crawl: auto incrementing behavior for the TopLoader.
showSpinner: to show spinner or not.
shadow: a smooth shadow for the TopLoader. (set to false to disable it)
template: to include custom HTML attributes for the TopLoader.
zIndex: defines zIndex for the TopLoader.
showAtBottom: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)

Happy coding :)

DEV Community: Fabian

Add router progress bar in Next Js 14

Get Started

app/layout.tsx or app/layout.jsx

Customizations