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.
yarn add next-nprogress
Import it inside your
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)
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.