Display a Progress Bar on route changes in a Next.js app.

Progress Bar in Next.js

Ravgeet Dhillon

Ravgeet Dhillon

Written on Jul 21, 2021 in Development

⏱ 3 min read

Blog banner for Progress Bar in Next.js

Sometimes when you transition from one route to another, it takes a little time to do so due to different factors. Behind the scenes, it may be rendering a complex page component or doing an API call. In such cases, the app looks like it has frozen for some seconds and then suddenly transitions to the next route. This results in a poor UX. In such cases, it is better to add a progress bar to your app which gives your users a sense that something is loading.

In this tutorial, you’ll learn to implement a progress bar in a Next.js app.

Contents

Installing NProgress

The first thing you need to do is to install nprogress NPM package.

To install nprogress, run the following command in your terminal:

npm i --save nprogress

Understanding Basic Usage

In the pages/_app.js, import the following modules:

import Router from 'next/router'
import NProgress from 'nprogress'

Now, you need to add some router events to control the behaviour of the progress bar.

In the pages/_app.js, add the following code:

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

Depending upon your use case, you can remove the default loading spinner.

NProgress.configure({ showSpinner: false })

The final code for pages/_app.js will look like this:

import Router from 'next/router'
import NProgress from 'nprogress'

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

NProgress.configure({ showSpinner: false })

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Results

At this point, you are done with the code and the final step is to test your app.

Go to your Next.js app and navigate to a new route. Your progress bar will be displayed like this:

📫

Loved this post? Join our Newsletter.

We write about React, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development and Technical Content Writing. He is a fan of Jamstack and likes to work with React, Vue, Flutter, Strapi, Node, Laravel and Python. He loves to play outdoor sports and cycles every day.

TAGGED WITH

Got a project or partnership in mind?

Let's Talk

Contact Us ->