如何在 NextJS 中添加骨架加载？

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

方法：要添加我们的骨架加载，我们将使用 react-loading-skeleton 包。 react-loading-skeleton 包帮助我们在应用程序的任何位置添加骨架加载。所以首先，我们将安装 react-loading-skeleton 包，然后我们将在我们的主页上添加一个加载屏幕。

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

npx create-next-app gfg

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

npm i react-loading-skeleton

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

添加骨架加载：安装包后，我们可以轻松地将加载添加到我们的应用程序中。对于这个例子，我们将添加一个骨架加载到我们的主页。

index.js

import React, { useState } from 'react';
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
  
export default function SkeletonLoading(){
  const [checked, setChecked] = React.useState(false);
  
  const handleChange = () => {
    setChecked(!checked);
  };
  return (
    

      
        
        Loading
      
      
{checked?: 
           

           NextJs Skeleton Loading - GeeksforGeeks
           
}

  
    
  )
}

说明：在上面的例子中，我们首先从安装的包中导入我们的 Skeleton 组件。之后，我们在一个新函数中使用 Skeleton 组件。我们还使用 react hook 来检查复选框中的当前值。如果选中该复选框，那么我们将显示加载屏幕。

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

npm run dev

输出：