Next.js HOC to integrate NProg

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 Usage Component

Import it inside your pages/_app.js;

import NProgress from "next-nprogress/component";

Render the component in your custom App container:

<NProgress />

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

Import it inside your pages/_app.js;

import withNProgress from "next-nprogress";

Wrap your custom App container with it

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

Internally it will use the NProgress component and render it alongside your application.

You can configure further configure NProgress using its configuration options.

Configure the component:

<NProgress color="#29d" options={{ trickleSpeed: 50 }} showAfterMs={300} spinner />

Configure the HOC:

const msDelay = 200; const options = { trickleSpeed: 50 }; export default withNProgress(msDelay, options)(MyApp);