如何在 NextJS 中添加 Spinner 加载器？

在本文中，我们将学习如何在 NextJs 中添加微调器加载器。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。

方法：要添加我们的微调器加载器，我们将使用 react-loader-spinner 包。 react-loader-spinner 包帮助我们将微调加载器集成到我们的应用程序中。所以首先，我们将安装 react-loader-spinner 包，然后我们将在我们的主页上添加一个微调器加载器。

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

npx create-next-app gfg

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

npm i react-loader-spinner

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

添加微调器加载器：安装包后，我们可以轻松地在应用程序的任何页面上添加微调器加载器。对于这个例子，我们将添加一个加载器到我们的主页。

index.js

import React from 'react';
import Loader from "react-loader-spinner";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
  
export default function SpinnerLoading(){
  return (
    

      
NextJs Spinner Loader - GeeksforGeeks
       
    
  )
}

说明：在上面的例子中，我们首先导入了 Loader 组件，然后，我们在一个新函数中使用 Loader 组件来添加我们的 Spinner 加载器。还在 Loader 组件中设置颜色、高度、重量和超时。

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

npm run dev

输出：