DEV Community

Cover image for Progress Bar in Next.js
Ravgeet Dhillon
Ravgeet Dhillon

Posted on • Originally published at ravsam.in on

Progress Bar in Next.js

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

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
  • 2. Basic Usage
  • Results

1. Installing NProgress

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

npm i --save nprogress
Enter fullscreen mode Exit fullscreen mode

2. Basic Usage

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

import Router from 'next/router'
import NProgress from 'nprogress'
Enter fullscreen mode Exit fullscreen mode

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())
Enter fullscreen mode Exit fullscreen mode

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

NProgress.configure({ showSpinner: false })
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Results

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

If you enjoyed my article, follow me for more stuff.

This article was originally published on RavSam’s blog. We publish our articles on Medium after a week.

🤝 Connect with Me

I love writing for the community while working on my freelance and open source projects. Connect with me through TwitterLinkedInGithubEmail.

💌 Get our Newsletter

We write about Nuxt, Vue, Strapi, Flutter, Jamstack, and Automation. Subscribe to our newsletter

🛖 About RavSam

We are helping companies and startups around the globe with Digital Product Development powered by modern Jamstack architecture. Get in Touch with us.

📙 You might also enjoy reading


Discussion (0)