Having a default image as a loading screen for nextjs

[JJM]

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, 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} />;
    </>
  );
}

But I’m still not able to get any console logs or my background as the loading screen

[NikIvan]

It seems you have correct code according to docs but if you copy-pasted your code exactly as it is - you should see an error in console like "

useEffect is not a function

because you have misspelled an import

import {useState, useEfffect} from "react";