1

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?

tanguy_k
  • 11,307
  • 6
  • 54
  • 58
Rugved Tipare
  • 68
  • 7
  • Does this answer your question? [Loading Screen on next js page transition](https://stackoverflow.com/questions/55624695/loading-screen-on-next-js-page-transition) – juliomalves Dec 08 '21 at 16:17
  • Smaller alternative to NProgress: https://gist.github.com/tkrotoff/db8a8106cc93ae797ea968d78ea28047 – tanguy_k Feb 05 '23 at 22:37

2 Answers2

3

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

Vitor Gomes
  • 132
  • 3
0

In __app.js or __app.tsx

import Router from 'next/router';
import NProgress from 'nprogress';

add the CSS for NProgress in the head:

<link rel="stylesheet" type="text/css" href="/nprogress.css" />

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());
tanguy_k
  • 11,307
  • 6
  • 54
  • 58
Mohammed Al-Reai
  • 2,344
  • 14
  • 18