![Next.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q540t4ekp91jht2hwflk.png) ## 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: ```javascript import React from "react"; import styles from "./Loading.module.css"; function Loading(props) { return (

); } export default Loading; ``` Styles (CSS) for the Loading component: ```css .body_loading { display: flex; align-items: center; justify-content: center; height: 100vh; } .none { display: none; } .lds_ellipsis { display: inline-block; position: relative; width: 80px; height: 80px; } .lds_ellipsis div { position: absolute; top: 33px; width: 15px; height: 15px; border-radius: 50%; background: var(--orange); animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds_ellipsis div:nth-child(1) { left: 8px; animation: lds_ellipsis1 0.6s infinite; } .lds_ellipsis div:nth-child(2) { left: 8px; animation: lds_ellipsis2 0.6s infinite; } .lds_ellipsis div:nth-child(3) { left: 32px; animation: lds_ellipsis2 0.6s infinite; } .lds_ellipsis div:nth-child(4) { left: 56px; animation: lds_ellipsis3 0.6s infinite; } @keyframes lds_ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds_ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds_ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } ``` 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](https://nextjs.org/docs/api-reference/next/router) 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. ```javascript import { useState, useEffect } from "react"; import { useRouter } from "next/router"; import Loading from "../components/Loading"; ``` 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. ```javascript function MyApp({ Component, pageProps }) { const router = useRouter(); const [loading, setLoading] = useState(false); useEffect(() => { const handleStart = (url) => { url !== router.pathname ? setLoading(true) : setLoading(false); }; const handleComplete = (url) => setLoading(false); router.events.on("routeChangeStart", handleStart); router.events.on("routeChangeComplete", handleComplete); router.events.on("routeChangeError", handleComplete); }, [router]); return ( <> ); } export default MyApp; } ``` 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.