Posted on Aug 2 • Originally published at blog.Designly.biz Route transitions significantly impact the user experience of your web application. Smooth, informative transitions keep your users engaged and informed. Today, we'll explore a practical aspect of improving this UX in Next.js applications: building a route change loading overlay using next/router events.Keep in mind, this tutorial uses the next/router package, not the newer next/navigation. That being said, this will only work with the old (still in heavy use) pages router, not the new app router. A tutorial on loaders/routing events for the app router is forthcoming.There is also a GitHub repo and demo companion site for this tutorial. Links to both are that the bottom of this article. So, without further ado, let's get coding!The quickest way to get up and running would be to clone my repo. But if you want to start from scratch, just spin up a new Next.js project using create-next-app@latest with the following settings:This will install all our dependencies. You shouldn't need to install anything else.Now create a folder src/components and in it, a file called RouteLoader.tsx:Should be pretty self-explanatory here. We bind the routeChangeStart event to handleStart, and routeChangeComplete and routeChangeError to handleComplete. We also want to remove these listeners when the component is unmounted, so we return a function that unbinds the events. Basically, what will happen is as soon as a route change is detected, loading state will be set to true. This will show our full-screen loading overlay. Once the page is done loading, the handleComplete event will fire (on success or error) and loading will be set to false.Finally, in our _app.tsx file, we'll modify it to import our loader component:That's it! This is a very basic example. You could create a much fancier loader using an animated SVG or GIF, but it's generally good practice to make your loader very lightweight. Otherwise you'd need a loader for your loader! 🤣GitHub RepoDemo SiteThank you for taking the time to read my article and I hope you found it useful (or at the very least, mildly entertaining). For more great information about web dev, systems administration and cloud computing, please read the Designly Blog. Also, please leave your comments! I love to hear thoughts from my readers.I use Hostinger to host my clients' websites. You can get a business account that can host 100 websites at a price of $3.99/mo, which you can lock in for up to 48 months! It's the best deal in town. Services include PHP hosting (with extensions), MySQL, Wordpress and Email services.Looking for a web developer? I'm available for hire! To inquire, please fill out a contact form.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Andrew Ezeani - Aug 1 Hiyok Kizu - Jul 30 Gabriel C. Troia - Aug 1 Mariano Álvarez 🇨🇷 - Jul 25 Once suspended, designly will not be able to comment or publish posts until their suspension is removed. Once unsuspended, designly will be able to comment and publish posts again. Once unpublished, all posts by designly will become hidden and only accessible to themselves. If designly is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Jay @ Designly. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag designly: designly consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging designly will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.