¿Cómo agregar el efecto de máquina de escribir en Next.js?

En este artículo, vamos a aprender cómo podemos agregar el efecto de máquina de escribir 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 efecto de máquina de escribir, vamos a utilizar el paquete de efectos de máquina de escribir. El paquete de efectos de máquina de escribir nos ayuda a agregar el efecto de máquina de escribir en cualquier parte de nuestra aplicación. Primero, instalaremos el paquete de efectos de máquina de escribir y luego agregaremos el efecto 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 de efecto de máquina de escribir usando el siguiente comando:

npm i typewriter-effect

Estructura del proyecto: Se verá así.

Agregar el efecto: podemos agregar fácilmente el efecto de máquina de escribir en nuestra aplicación después de instalar el paquete de efectos de máquina de escribir. Para este ejemplo, vamos a agregar el efecto a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import React from "react";
import Typewriter from 'typewriter-effect';
  
export default function TypingEffect() {
  return (
    <div>
      <h3>GeeksforGeeks Typing Animation</h3>
      <Typewriter
        onInit={(typewriter) => {
          typewriter.typeString('Hello World!')
            .callFunction(() => {
              console.log('String typed out!');
            })
            .pauseFor(2500)
            .deleteAll()
            .callFunction(() => {
              console.log('All strings were deleted');
            })
            .start();
        }}
      />
    </div>
  );
}

Explicación: en el ejemplo anterior primero, estamos importando el componente de máquina de escribir del paquete instalado. Después de eso, estamos agregando el tiempo de pausa, la función deleteAll y el texto en el que queremos agregar texto en nuestro componente Typewriter.

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

npm run dev

Producción: