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
npm i nextjs-progressbar
After installing the package, import NextNProgress
in your pages/_app.js
file:
import NextNProgress from 'nextjs-progressbar';
And for rendering add <NextNProgress />
to your return()
in MyApp()
:
import NextNProgress from 'nextjs-progressbar';
export default function MyApp({ Component, pageProps }) {
return (
<>
<NextNProgress />
<Component {...pageProps} />;
</>
);
}
If no props are passed to <NextNProgress />
, below is the default configuration applied.
<NextNProgress 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.We use internal css in this package. If you are using csp, you can add nonce to the <style>
tag by providing nonce
prop to <NextNProgress />
component.
<NextNProgress nonce="my-nonce" />
You can use transformCSS
prop to pass custom css.
Note: You must return a JSX.Element
from the function.
<NextNProgress
transformCSS={(css) => {
// css is the default css string. You can modify it and return it or return your own css.
return <style>{css}</style>;
}}
/>
You can use other configurations which NProgress provides by adding a JSON in options
props.
<NextNProgress options={{ easing: 'ease', speed: 500 }} />