如何在 Next.js 中添加媒体下载器？

在本文中，我们将学习如何在 NextJs 中添加 Media Downloader。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：要添加我们的媒体下载器，我们将使用 react-use-downloader 包。 react-use-downloader 包帮助我们在应用程序的任何地方添加推荐。所以首先，我们将安装 react-use-downloader 包，然后我们将在我们的主页上添加媒体下载器。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 react-use-downloader 包：

npm i react-use-downloader

项目结构：它看起来像这样。

添加媒体下载器：安装 react-use-downloader 包后，我们可以很容易地在我们的应用中添加媒体下载器。对于这个例子，我们将媒体下载器添加到我们的主页。

在index.js文件中添加以下内容：

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 (
    

      
GeeksforGeeks - File Downloader
      
Download is in {isInProgress ? 
        "in progress" : "stopped"}
  
       download(fileUrl, filename)}>
        Click to download the file
      
       cancel()}>
        Cancel the download
      
      
Download size in bytes {size}
  
      Downloading progress:
      
      
Elapsed time in seconds {elapsed}
      {error && 
possible error {JSON.stringify(error)}
}
    
  );
}

说明：在上面的示例中，我们首先从已安装的包中导入 useDownloader 组件。之后，我们添加我们的文件和文件名。然后我们添加一个进度条，开始下载和停止下载按钮。

运行应用程序的步骤：在终端中运行以下命令以运行应用程序

npm run dev

输出：