Next.js Progressbar

A simple Next.js progressbar component using NProgress.

> I've created this Blog to help you create your own progressbar

Demo: https://demo-nextjs-progressbar.vercel.app

How to install?

``bash
npm i nextjs-progressbar
`

How to use?

After installing the package, import NextNProgress in your pages/_app.js file:

`js
import NextNProgress from 'nextjs-progressbar';
`

And for rendering add to your return() in MyApp():

`js
import NextNProgress from 'nextjs-progressbar';

export default function MyApp({ Component, pageProps }) {
return (
<>

;

);
}
`

$3

If no props are passed to , below is the default configuration applied.

`jsx

`

- color: to change the default color of progressbar. You can also use rgb(,,) or rgba(,,,).
- startPosition: to set the default starting position : 0.3 = 30%.
- stopDelayMs: time for delay to stop progressbar in ms.
- height: height of progressbar in px.
- showOnShallow: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing in Next.js docs.

$3

#### Adding nonce

We use internal css in this package. If you are using csp, you can add nonce to the ;
}}
/>
`

#### Other Configs

You can use other configurations which NProgress provides by adding a JSON in options props.

`jsx

``