I'm trying to create a Progress Bar which is at the very top of the website and each time you load the page, you see that Bar filling up.
I want to implement the same functionality in Next.js, but I'm struggling to do so. There are many libraries for the loading bar, but they all ask for a value prop which basically indicates how much the bar is filled, but I cannot find a way to get this value prop dynamically. I don't want to hardcode it, I want it to fill up as the page gets loaded.
Is there any way that I can find the value of the value prop dynamically?
There are a couple ways of doing that, nextjs have the Router import, so you can use the events see here
With that in mind you could create the visual component and if you really want to show on every page change, you could use this with your _app.tsx/jsx with the useEffect hook. Just don't forget to cleanup the events after listening to them
This answer does a great job showing it how to implement it, it's a great reference and very generic, so you can custom as much as you want