Next.js HOC to integrate NProgress inside your app.


2.0.63 years ago3 years agoMinified + gzip package size for @dmartss/with-nprogress in KB



Next.js HOC to integrate NProgress inside your app.

This is configured to run only after a delay of (default) 300ms. This means if the page change takes too long it will render the progress bar, but if it's fast enough it will avoid rendering it.


Install it

yarn add next-nprogress

Import it inside your pages/_app.js;

import withNProgress from '@dmartss/with-nprogress'
import NProgressStyles from '@dmartss/with-nprogress/styles'

Wrap your custom App container with it

const msDelay = 300 // default is 300
export default withNProgress(msDelay)(MyApp)

And render NProgressStyles inside your App container or layout component

// the default progress bar and spinner color is #29d, it could be changed for any CSS color
<NProgressStyles color="#29d" />

That's it. Now NProgress will work automatically and will render the correct styles using styled-jsx.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.