With Nextjs - which I love btw!! - there is one thing that really bugs me and that is the pause when changing routes when the route is doing some data fetch on the server side.

It provides users with visual cues to indicate that the website is still in progress and will eventually be ready. It also reduces user frustration, as users can understand what is happening in the background and easily track progress.

With Nextjs, when landing on a route which has data fetching from the server side, there is a pause on the client side where nothing happens until the data is fetched. Once the data is fetched the data is passed down via props and then the page can be rendered and sent to the client.

This means when the page does load on the client side it has all the data there already which is good. However, that time in between where the user clicked to go to a certain route and the page actually rendering can lead to confusion on the user's behalf because it can seem like nothing is happening.

With Nextjs, if when landing on a route which has data fetching from the server side, this leads to a pause on the client side where nothing happens until the data is fetched.

That's where I like to use a library like 

. This is a slim progress bar that renders on the UI upon loading a route and shows to the user that something is actually happening. It has been used on major sites like Youtube, Github and Medium.

In order to use NProgress (or some other similar library) on Nextjs you have to hook into Nextjs's router events. You can get access to Nextjs's router using the following import:

This gives you a `Router` object which has an `events` object on it. With this you can hook into events on the Nextjs router and then call certain functions upon these events. 

With our use case we want to call certain functions on the NProgress library:

Here we are using three different events on the Nextjs router. The 

 event. In each case we are calling different NProgress functions.

By hooking into the Nextjs router events we are able to show the user that something is happening when they click on certain routes which are waiting for data fetches on the server side. 

 event is called we start the NProgress library. This triggers the progress bar to start on the UI. In order to see it though you need to add the css for the NProgress library also.

All of these can be placed in the `_app.tsx` file in your Nextjs project.

I placed this in the `_document.tsx` file. Once the route has loaded the 

 event is called and then the Nprogress `done()` function is called which completes the progress bar UI.

By hooking into the Nextjs router events we are able to show the user that something is happening when they click on certain routes which are waiting for data fetches on the server side. Great!

Nextjs can be great, but it's not perfect - there is a pause when changing routes when the route has to fetch data from the server, which the user may find confusing. By adding in some UI which is triggered by the Nextjs Router object it can alleviate this confusion and make your users's experience much more pleasant.

Find out more about `next/router` on the 

Nextjs UI Progress updates using NProgress library when loading data from server side. A visible UI for the user to see status of page loading.

Hi, I'm Adam Drake

Latest Blog Post

NProgress and Router Events with NextJs