Having a default image as a loading screen for nextjs

Question

I want to have my background as the loading screen between the page transitions in next js. Currently I have a Loader.js file that stores my image:-

import styles from './layout.module.css'

export default function Loader(){
    return(
        <div className={styles.loaderContainer}>
            <img src="../uploads/bg1080x1920.jpg" />
            <div>Loading ...</div> 
        </div>
    )

And in my _app.js I am using next/router for handling the routeChangeStart and routeChangeComplete events:

import {useState} from "react";
import { useRouter } from "next/router";
import Loader from "../components/Loader"

export default function App({ Component, pageProps }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  router.events.on("routeChangeStart", (url) => {
    console.log("Route is changing");
    setLoading(true)
  });
  router.events.on("routeChangeComplete", (url) => {
    console.log("Route is changed");
    setLoading(false)
  });

  return (
    <>
    {loading && <Loader />}
    <Component {...pageProps} />;
    </>
  );
}

But I'm not able to get any console logs from my routeChangeStart and routeChangeComplete events when I try to switch to another page.

Answer 1

In Next.js examples, events registering is always inside an useEffect hook. I suggest you to modify you code like this:

import {useState, useEfffect} from "react";
import { useRouter } from "next/router";
import Loader from "../components/Loader"

export default function App({ Component, pageProps }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)

  useEffect(() => { //<-- this useEffect will be triggered just one time at component initialization
      router.events.on("routeChangeStart", (url) => {
         console.log("Route is changing");
         setLoading(true)
      });
      router.events.on("routeChangeComplete", (url) => {
         console.log("Route is changed");
         setLoading(false)
      });
  }, []);
  
  return (
    <>
    {loading && <Loader />}
    <Component {...pageProps} />;
    </>
  );
}