How to make Custom Loading Screen in Next.js Project
Next.js Custom Loading Screen
24 November, 2021
8
8
2
Contributors
Introduction
Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
I was trying to build a custom loading screen for my project in Next.js so I try to google how we can implement it and after hours of searching, I was not able to find a solution that suits my need. There was a solution I came across on the Internet that was using a library called "nprogress" to do so but it does not provide a loading screen that I want to implement so after going through Next.js documentation and this "nprogress" solution, I was able to figure out my solution for the problem. It took me lots of time so I created this blog to help anyone who wants to implement a custom loading screen in Next.js easily in less time.
Making Custom Loading Screen Component
This part solely depends on you and how you want your loading screen component to look like. For Example below is my Loading component:
Styles (CSS) for the Loading component:
So you have successfully build your loading screen component with custom styling now its time to render it on web application every time a route changes.
For doing that we will take help of Next.js router events, You can listen to different events happening inside the Next.js Router.
Here's a list of supported events:
routeChangeStart(url, { shallow }) - Fires when a route starts to change
routeChangeComplete(url, { shallow }) - Fires when a route changed completely
routeChangeError(err, url, { shallow }) - Fires when there's an error when changing routes, or a route load is cancelled
err.cancelled - Indicates if the navigation was cancelled
beforeHistoryChange(url, { shallow }) - Fires before changing the browser's history
hashChangeStart(url, { shallow }) - Fires when the hash will change but not the page
hashChangeComplete(url, { shallow }) - Fires when the hash has changed but not the page
For more details about these events and other router methods you can visit Next.js official documentation
By help of these events you can add your loading screen component to app.js see how:
First import
{useState, useEffect} from "react", {useRouter} from "next/router" and your Loading component.Now we will declare
loading variable using useState hook and initialize it with false and we will set it to true when route changes and revert it back to false once route change completes.We will put that logic inside
useEffect hook and set router as its dependency. It means everytime router changes logic inside useEffect hook will get executed.We will pass
loading variable as a prop to our Loading component so that whenever loading is true Loading component will have class having display: block and when it is false it will have class having display: none.Conclusion
This is how you can make a custom loading screen in Next.js. I hope this blog help you and save your time and efforts.
Thank you for reading! See you again soon.
Feel free to connect with me on LinkedIn.
You can follow me on Instagram.
You can know more about me and projects on which I have worked by visiting my Portfolio
If you find this post useful and informative, you can support me and Buy Me A Coffee. Your support encourages me to write more informational and useful content in the future.
web development
reactjs
nextjs