Having a default image as a loading screen for nextjs

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(){
        <div className={styles.loaderContainer}>
            <img src="../uploads/bg1080x1920.jpg" />
            <div>Loading ...</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");
      router.events.on("routeChangeComplete", (url) => {
         console.log("Route is changed");
  }, []);
  return (
    {loading && <Loader />}
    <Component {...pageProps} />;

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

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";

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.