Progress Bar in Next.js

Ravgeet Dhillon
Ravgeet Dhillon on Jul 21, 20213 min read
Written in
Blog banner for Progress Bar in Next.js

Sometimes when we 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 our application which gives our users a sense that something is loading.

In this tutorial, we learn how to implement a progress bar in a Next.js application.

Contents

1. Installing NProgress

The first step we need to do is to install nprogress npm module.

npm i --save nprogress

2. Basic Usage

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

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

Now, we need to add some Router events to control the behaviour of the progress bar. We need to add the following code:

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

Depending upon our use case, we can remove the loading spinner that comes by default.

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

We are done with the code. Let’s see how our progress bar will look like in a Next.js application.

Subscribe to RavSam Web Solutions newletter for information about Website development, mobile apps development and software development

Loved this post? Join our Newsletter 🚀

We write about Nuxt, 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, Freelancer and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development. He is a fan of Jamstack and likes to work with Flutter, Strapi, Nuxt/Vue and Python. Connect with Ravgeet on Twitter and LinkedIn.

KEEP READING

Blog banner for Best VS Code extensions for Nuxt/Vue Projects

Best VS Code extensions for Nuxt/Vue Projects

Written in Development
Blog banner for Turn a Google Sheet into a REST API

Turn a Google Sheet into a REST API

Written in Development

Got a project or partnership in mind?

Let's Talk

Contact Us ->