¿Cómo agregar Timer en Next.js?

En este artículo, vamos a aprender cómo podemos agregar Timer en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para agregar nuestro temporizador, vamos a usar el paquete react-countdown-circle-timer. El paquete react-countdown-circle-timer nos ayuda a integrar diferentes tipos de temporizadores. Entonces, primero, instalaremos el paquete react-countdown-circle-timer, y luego agregaremos el temporizador en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-countdown-circle-timer usando el siguiente comando:

npm i react-countdown-circle-timer

Estructura del proyecto: Se verá así.

Agregar el temporizador: después de instalar el paquete react-countdown-circle-timer, podemos agregar fácilmente el temporizador en nuestra aplicación. Para este ejemplo, vamos a agregar un temporizador a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import { CountdownCircleTimer } from 
    'react-countdown-circle-timer'
  
export default function Timer(){
  return (
    <div>
      <h3>GeeksforGeeks - Timer</h3>
      <CountdownCircleTimer
        isPlaying
        duration={10}
        colors={[
          ['#004777', 0.33],
          ['#F7B801', 0.33],
          ['#A30000', 0.33],
        ]}
      >
        {({ remainingTime }) => remainingTime}
      </CountdownCircleTimer>
    </div>
    
  )
}

Explicación: en el ejemplo anterior primero, estamos importando nuestro componente CountdownCircleTimer del paquete instalado. Después de eso, usamos el componente y configuramos las propiedades iniciales como isPlaying, la duración y el color. Entonces estamos mostrando el tiempo restante.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: