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

在现代 Web 应用程序中，用户等待很长的加载时间可能会导致失去用户。这是一个不断发展的问题，而解决这个问题的最好方法是使用骨架加载。

骨架加载是一种技术，可以在应用程序加载时快速加载用户界面的部分骨架，以便用户可以立即看到应用程序的基本布局，然后在后台加载所有其他内容。

在 NextJS 中添加骨架加载非常容易。下面是一些步骤：

1. 安装骨架加载组件

首先，你需要安装骨架加载的组件。你可以使用 react-loading-skeleton 或 react-placeholder 库。

使用以下命令安装 react-loading-skeleton ：

npm install react-loading-skeleton

使用以下命令安装 react-placeholder ：

npm install react-placeholder

2. 创建骨架加载组件

接下来，你需要创建一个骨架加载组件。这是一个简单的样例代码:

import React from "react";
import Skeleton from "react-loading-skeleton";

const MySkeleton = () => {
  return (
      <div>
          <Skeleton height={200} />
      </div>
  );
};

export default MySkeleton;

3. 在页面中使用骨架加载

现在，你可以在你的页面中使用你的骨架加载组件。例如，在 index.js 文件中添加以下代码：

import MySkeleton from "../components/MySkeleton";

const Index = () => {
    const isLoading = true; // 或者根据API等的状态判断是否需要加载骨架屏

    return (
        <div>
            {isLoading ? <MySkeleton /> : (
                //这里是正常的页面内容
            )}
        </div>
    );
};

export default Index;

在 isLoading 为 true 时，你的页面将显示骨架加载屏幕。一旦所有内容都加载完成，isLoading 将为 false，并且正常的页面内容将被呈现。

结论

骨架加载能够有效地减少用户等待应用程序加载的时间，从而提高了用户的满意度。在 NextJS 中使用骨架加载非常容易，你只需要三步即可实现。