Using NProgress with Next.js
September 08, 2021
2 min read
— views
Prerequisites
- Next.js application with version 11 or higher
Getting started
Firstly, we must install the NProgress
npm module
npm install nprogress
And its types
$npm install --save-dev @types/nprogress
Usage
Importing styles
To use the module, open your _app.tsx
file. We must import the required styles from
nprogress.
Custom app
If you do not have an _app file yet, you can copy this template below. This example comes from Next.js' docs.
Open template
pages/_app.tsx
export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; }
pages/_app.tsx
import "nprogress/nprogress.css"; export default function MyApp({ Component, pageProps }) { return /* ... */ }
Router events
We'll add a useEffect
in our component and add 2 handlers to handle routeChangeStart
and routeChangeComplete
.
More info about router events.
pages/_app.tsx
import * as React from "react"; import Router from "next/router"; import NProgress from "nprogress" export default function MyApp({ Component, pageProps }) { /* ... */ React.useEffect(() => { const handleRouteStart = () => NProgress.start(); const handleRouteDone = () => NProgress.done(); Router.events.on("routeChangeStart", handleRouteStart); Router.events.on("routeChangeComplete", handleRouteDone); Router.events.on("routeChangeError", handleRouteDone); return () => { // Make sure to remove the event handler on unmount! Router.events.off("routeChangeStart", handleRouteStart); Router.events.off("routeChangeComplete", handleRouteDone); Router.events.off("routeChangeError", handleRouteDone); }; }, []); /* ... */ };
Done
That's it! Start your dev server and see the changes!