How to delay 'next/link' Nextjs

Question

How add a Route link a delay for page transitions?

Nextjs Version 12.1.0

<Link href="/">
  <a className='logo-home'></a>
</Link>{' '}

the solution i used

App.js

  const router = useRouter();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    router.events.on("routeChangeError", (e) => setLoading(false));
    router.events.on("routeChangeStart", (e) => setLoading(false));
    router.events.on("routeChangeComplete", (e) => setTimeout(() => {setLoading(true)}, 1000));

    return () => {
      router.events.off("routeChangeError", (e) => setLoading(false));
      router.events.off("routeChangeStart", (e) => setLoading(false));
      router.events.off("routeChangeComplete", (e) => setTimeout(() => {setLoading(true)}, 1000));
    };
  }, [router.events]);


{loading ? (<Component {...pageProps} />) : (null)}

It doesn't work well.

Can someone help me. Another better solution

Answer 1

You can just disable the link redirect and use router.push.

Use onClick on Link component.

<Link href="/" onClick={handleClick}>
  <a className='logo-home'></a>
</Link>

Use timeout to delay redirect.

const handleClick = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => {
        router.push('/');
    }, 3000);
}