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

在 NextJS 应用中添加 Spinner 加载器可以增强用户体验，让用户在等待页面加载时感到更加舒适和自在。本文将介绍如何在 NextJS 中添加 Spinner 加载器。

1. 安装依赖

首先需要安装加载器依赖。我们将使用 react-spinners 这个库来添加加载器。

npm install react-spinners

2. 添加加载器组件

我们需创建一个组件来加载 Spinner 加载器。比如，你可以在你的项目中创建一个文件 components/Spinner.js，并导出以下组件：

import React from "react";
import { css } from "@emotion/core";
import { Loader } from "react-spinners";

const override = css`
  display: block;
  margin: 0 auto;
`;

const Spinner = ({ loading }) => {
  return (
    <Loader css={override} size={15} color={"#0070f3"} loading={loading} />
  );
};

export default Spinner;

上述组件创建一个需要传递一个 loading prop 的 Spinner 组件。loading prop 接受布尔值，在接收 true 时显示加载器，接收 false 时隐藏加载器。

3. 使用该组件

现在，你可以在你的应用中使用该 Spinner 组件展示加载器了。比如，在一个异步请求的页面中，你可以跟据请求状态渲染该组件。下面是一个例子：

import { useState, useEffect } from "react";
import Spinner from "../components/Spinner";

const MyPage = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch("some-data-url")
      .then((res) => res.json())
      .then((data) => {
        // your data handling code here
      })
      .finally(() => setLoading(false));
  }, []);

  return (
    <div>
      {/* your page content here */}
      <Spinner loading={loading} />
    </div>
  );
};

export default MyPage;

在上述例子中，loading 状态在异步请求前置为 true，在请求完成和处理后置为 false。Spinner 组件通过传递 loading 属性来控制组件的渲染。

现在，你已经可以让你的 NextJS 应用在异步请求时显示 Spinner 加载器了！

最终效果：

参考文献：

• https://github.com/davidhu2000/react-spinners