Next Router - DelayRedirect

DelayRedirect.tsx

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

interface DelayProps {
  delay: number;
  to: string;
  banner: boolean;
  showCount: boolean;
}

export const DelayRedirect = ({ delay, to, banner, showCount }: DelayProps): JSX.Element => {
  const router = useRouter()
  const seconds = Number(delay.toString()[0])
  const [counter, setCounter] = React.useState(seconds);
  const [timeToRedirect, setTimeToRedirect] = useState(false);
  useEffect(() => {
    counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
  }, [counter]);
  useEffect(() => {
    const timeout = setTimeout(() => router.push(to), delay);
    return () => clearTimeout(timeout);
  }, [delay]);
  return banner ?  <p>Serás redirigido a {to === '/' ? 'Inicio' : to} {showCount ? `en ${counter} segundos...` : 'en breve'}</p> : null
};