Nextjs Link component with a redirection delay.

link.tsx

// Don't follow this link: unzip.dev (unless you're curious).

import { useRouter } from 'next/router'
import React from "react";
import { useCallback, useEffect } from "react";

interface LinkProps {
    /**
     * The url to send link to
     */
    href: string;
    /**
     * prefetch the url
     */
    prefetch?: boolean;
    /**
     * Delay before redirecting
     */
    delay?: number;
    /**
     * Children components
     */
    children: React.ReactNode
}

const Link = ({
    href,
    prefetch = true,
    delay,
    children
}: LinkProps) => {

    const router = useRouter();

    useEffect(() => {
        // Prefetch the href if needed
        if (prefetch)
            router.prefetch(href)
    }, []);

    const onClick : ()=> void = useCallback(() => {
        setTimeout(() => {
            router.push({
                pathname: href,
            })
        }, delay ?? 0)
    }, []);

    return (
        <span onClick={onClick}>
            {children}
        </span>
    );
}

export default Link;

/*
Usage:

Here for example we want to delay so the user will see the animation before redirection.
<Link href="/next-step" prefetch={true} delay={100}>
  <Button onClick={playAnimation}>Go</Button>
</Link>

*/