使用 Next.js 的 Lottie 播放器

Question

我有 Next.js 项目，我在其中使用 lottie-player 来制作一些动画图标。但是，每次运行该项目时我都会收到以下错误。一旦错误被关闭，应用程序就可以正常运行。

NotSupportedError：无法在“CustomElementRegistry”上执行“define”：名称“lottie-player”已在此注册表中使用。我究竟做错了什么？

我已经安装了 Lottie 播放器，并且正在使用 useEffect 导入 Lottie 播放器：

useEffect(() => {
    import("@lottiefiles/lottie-player");
  });

然后使用这些图标：

    <><script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js" async>. </script>
    <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_YIBaBZH9fj.json" background="transparent" speed="0.5" style={{ "width": "200px", "height": "150px" }} loop autoplay></lottie-player>
    </>

Answer 1

import Lottie from "lottie-react";
import animationData from "@/public/lottie/error-404.json";
export default function Custom404() {
  return (
    <div className="flex flex-col w-full justify-center items-center">
      <Lottie
        animationData={animationData}
        className="flex justify-center items-center"
        loop={true}
      />
    </div>
  );
}

这对我来说非常有效。

我在用npm i lottie-react