How to setup Nprogress properly in app router?
Unanswered
West African Lion posted this in #help-forum
West African LionOP
Is anybody able to setup the Nprogress bar in the app router? I have tried 2 packages but they are not working properly.
14 Replies
I am currently using
@West African Lion
nextjs-toploader. This one works fine for me. Only in the newest version now (14.0.3 I guess) the bar loads infinite. I think thats fixed with the the next nextjs version (or the next version of nextjs-toploader). So I will wait ^^@West African Lion
West African LionOP
@B33fb0n3 I have tried this packages, but could not find the correct result. For example -
It's stuck when click on the same route, not working on router.push and unnecessary start on a tag click etc.
It's stuck when click on the same route, not working on router.push and unnecessary start on a tag click etc.
you are using the 14.0.3 from nextjs? @West African Lion
Only in the newest version now (14.0.3 I guess) the bar loads infinite.
Selkirk Rex
here's a project where I use next-nprogress-bar if it helps https://github.com/v6cord/niveaux-neo/blob/master/app/providers.jsx
then just wrap your layout with <Providers>
@West African Lion fixed?
West African LionOP
@B33fb0n3 I am using next 14.0.1 and not working in this version as well.
@Selkirk Rex here's a project where I use next-nprogress-bar if it helps https://github.com/v6cord/niveaux-neo/blob/master/app/providers.jsx
West African LionOP
Thanks but the link mentioned is showing 404.
Selkirk Rex
oh it might be private, I'll upload the file when I'm home
Selkirk Rex
@West African Lion
you can ignore the next auth thing
and then the layout is just like
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={font.className}>
<Providers>
<main>{children}</main>
</Providers>
</body>
</html>
);
}