← All Blogs

Progress Bar in Next.js

29 July, 2021
~295 reads
Progress Bar in Next.js blog

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 application that gives your users a sense that something is loading.

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

Read the full blog on RavSam.

Thanks for reading 💜


I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I across while surfing on the web.

Connect with me through TwitterLinkedInGithub or send me an Email.

Ravgeet, Full Stack Developer and Technical Content Writer

📮 Join my newsletter

I share tips on how to get started with freelancing, remote jobs, developer-related stuff, startup ecosystem, and lots of insider secrets with my subscribers.

Subscribe →
🧠 More Interesting Reads
Setup and Customize Bootstrap in Next.js
Learn how to improve the look and feel of the Next project by configuring the default Bootstrap behaviour.
Disabling Submit button if Form fields have not changed in a Nuxt/Vue app
Learn how to keep a form submit button disabled until the form fields have not changed in a Nuxt/Vue app.
How to add and customize Bootstrap in Nuxt.js
Learn how to improve the look and feel of a Nuxt project by configuring the default Bootstrap behaviour.