Next.js takes a little bit of time to route between pages, especially to server-side rendered pages as these are rendered on request. This tutorial will address this issue by demonstrating how to showcase the progress indicator when we route to the Characters page. To finish setting up, run the following command in your terminal to install two third-party libraries, NProgress and React Spinners, that we’ll be using later in this tutorial.

10m read timeFrom blog.logrocket.com
Post cover image
Table of contents
ContentsPrerequisitesWhat are Next.js Router events?Getting startedOver 200k developers use LogRocket to create better digital experiencesCreating the loader componentCreating the Router events ( routeChangeStart , routeChangeComplete , and routeChangeError )Adding animationConclusionLogRocket : Full visibility into production Next.js apps