¿Cómo agregar Media Downloader en Next.js?

En este artículo, vamos a aprender cómo podemos agregar Media Downloader 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 Media Downloader, vamos a utilizar el paquete react-use-downloader. El paquete react-use-downloader nos ayuda a agregar testimonios en cualquier parte de nuestra aplicación. Primero, instalaremos el paquete react-use-downloader y luego agregaremos Media Downloader 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-use-downloader usando el siguiente comando:

npm i react-use-downloader

Estructura del proyecto: Se verá así.

Agregar el descargador de medios: podemos agregar fácilmente el descargador de medios en nuestra aplicación después de instalar el paquete de descarga de uso de reacción. Para este ejemplo, vamos a agregar el descargador de medios a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import React from "react";
import useDownloader from "react-use-downloader";
  
export default function App() {
  const { size, elapsed, percentage, download,
        cancel, error, isInProgress } =
    useDownloader();
  
  const fileUrl = "/File.pdf";
  const filename = "File.pdf";
  
  return (
    <div className="App">
      <h3>GeeksforGeeks - File Downloader</h3>
      <p>Download is in {isInProgress ? 
        "in progress" : "stopped"}</p>
  
      <button onClick={() => download(fileUrl, filename)}>
        Click to download the file
      </button>
      <button onClick={() => cancel()}>
        Cancel the download
      </button>
      <p>Download size in bytes {size}</p>
  
      <label for="file">Downloading progress:</label>
      <progress id="file" value={percentage} max="100" />
      <p>Elapsed time in seconds {elapsed}</p>
      {error && <p>possible error {JSON.stringify(error)}</p>}
    </div>
  );
}

Explicación: en el ejemplo anterior primero, estamos importando el componente useDownloader del paquete instalado. Después de eso, agregaremos nuestro archivo y los nombres de archivo. Luego agregamos una barra de progreso, comenzamos a descargar y detenemos los botones de descarga.

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

npm run dev

Producción: