DEV Community

Cover image for Using nprogress with next-js to show page is loading
Henok Tsegaye
Henok Tsegaye

Posted on

Using nprogress with next-js to show page is loading

using next js with nprogress

nprogress
using next js should be one of the most awesome thing ever, i have used it and i loved it.

so nprogress had support for next js and other js frameworks

here is how it works.
put this in _app.js.

import NProgress from 'nprogress';
import Router from 'next/router';
import 'nprogress/nprogress.css';

NProgress.configure({
minimum: 0.3,
easing: 'ease',
speed: 800,
showSpinner: false,
});

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

Top comments (2)

Collapse
 
ongkay profile image
ongkay

how to use to next js 13 ?

Collapse
 
henoktsegaye profile image
Henok Tsegaye

It should also work for next 13