Top Progressbar in Next.js app directory while navigating between pages in Next.js 13

Top Navigation Progress bar for Next.js 13 app directory

297Reads

22 May, 2023

In Next.js times, when there was no /app directory, we used to use this famous library called "nextjs-progressbar" to display progressbar on top of pages when we navigate between one page to another in Next.js

However, this library dosen't work as of now in Next.js /app directory, there might be a thread in github for it. So, i you want Next.js Progressbar on Top in Next.js 13 /app directory, then there is one more library which works with both /pages and /app directory.

Next.js TopLoader (nextjs-toploader)

Its a Next.js Top Loading Bar component made using nprogress, works with Next.js 13 /app directory, to display progressbar on top of pages when we navigate between one page to another in Next.js

npm install nextjs-toploader

or 

yarn add nextjs-toploader

import NextTopLoader from 'nextjs-toploader';


// for /app directory, put it in /layout.tsx file like this
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}



// for /pages directory, put it in /_app.tsx file like this
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextTopLoader />
      <Component {...pageProps} />;
    </>
  );
}

It also has various options to configure and style the progressbar. Check out more on it here: www.npmjs.com/package/nextjs-toploader

Hope, this helped you. Let me know in comments section if you faced any issue or need help.