Improve Next.js UX with a Page Loading Indicator

Introduction

Next.js has become one of the go-to frameworks for building modern React applications.

One of its strengths is client-side navigation — common in Single Page Applications (SPAs) — which makes transitions between pages feel fast and seamless. With built-in tools like the Link component and Router, implementing this behavior is straightforward.

However, there’s a subtle UX issue that often gets overlooked.

Unlike traditional multi-page websites, Next.js doesn’t provide a built-in loading indicator during page transitions. When a page is fetching data via JavaScript, users may see a brief pause with no visual feedback. This can feel like the app is stuck or unresponsive—leading to confusion and a poorer user experience.

Let’s Fix That

We can solve this with a simple and effective approach using a progress bar.

In just two steps:

1. Install nprogress
2. Bind it to Next.js router events

1. Install nprogress

nprogress is a lightweight library that adds a sleek progress bar at the top of the page.

Install it using:

npm install nprogress

or

yarn add nprogress

2. Bind to Router Events

Next, we trigger the progress bar when navigation starts, and stop it when navigation completes.

We’ll use Next.js router events for this and bind them inside the custom App component.

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

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

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

export default MyApp;

Pro Tip:

Make sure you bind the event handlers outside the component to avoid multiple bindings during re-renders.

Notes

• CSS support for nprogress works out of the box in Next.js 9.3 and above.
• If you're using an older version, you may need a plugin like @webdeb/next-styles to properly load CSS files.

Final Thoughts

Adding a loading indicator might seem like a small improvement, but it has a big impact on perceived performance and usability.

It reassures users that something is happening in the background—and that your app is responsive and reliable.

Simple tweak, better UX.

That’s all. I hope this was helpful. See you later.