Nprogress component for Next.js app.
npm install nextjs-progressbar2bash
npm i nextjs-progressbar2
`
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="#29D"
startPosition={0.3}
stopDelayMs={200}
height={3}
showOnShallow={true}
/>
`
- 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