如何在Next.js（App Router架构）中用Lottie实现加载页动画Logo

核心问题分析 #

你遇到的情况是因为Next.js App Router的服务器端渲染（SSR）机制，Lottie依赖DOM环境，而服务器端没有DOM，直接初始化会失效。加上你用的react-lottie库维护不活跃，和App Router的客户端组件机制兼容性较差，导致即使加了"use client"也无法正常触发动画。

解决方案1：换用兼容的Lottie库（推荐） #

放弃react-lottie，改用lottie-react——这是维护更活跃、适配React 18和App Router的官方推荐封装库。

步骤：

1. 安装依赖：

npm install lottie-react
# 或 yarn add lottie-react

2. 编写客户端组件：

"use client"; // 必须放在文件第一行有效代码位置

import { useState, useEffect } from "react";
import Lottie from "lottie-react";
// 导入你的Lottie动画JSON文件
import logoAnimation from "../public/animations/logo.json";

export default function LoadingLogo() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // 确认组件已在客户端挂载
    setIsClient(true);
  }, []);

  // 服务器端渲染时返回空，避免DOM相关错误
  if (!isClient) return null;

  return (
    <div style={{ width: 200, height: 200 }}> {/* 必须给容器设置固定尺寸 */}
      <Lottie
        animationData={logoAnimation}
        loop={true}
        autoplay={true}
        rendererSettings={{ preserveAspectRatio: "xMidYMid slice" }}
      />
    </div>
  );
}

解决方案2：修复现有react-lottie的用法 #

如果坚持使用react-lottie，需要手动在客户端挂载后触发动画初始化：

"use client";

import { useState, useEffect } from "react";
import Lottie from "react-lottie";
import logoAnimation from "../public/animations/logo.json";

export default function LoadingLogo() {
  const [lottieOptions, setLottieOptions] = useState({
    loop: true,
    autoplay: false, // 初始关闭自动播放
    animationData: logoAnimation,
    rendererSettings: { preserveAspectRatio: "xMidYMid slice" }
  });

  useEffect(() => {
    // 组件挂载后开启自动播放，触发Lottie初始化
    setLottieOptions(prev => ({ ...prev, autoplay: true }));
  }, []);

  return (
    <div style={{ width: 200, height: 200 }}>
      <Lottie options={lottieOptions} />
    </div>
  );
}

关键注意事项 #

• "use client"必须是文件的第一行有效代码，不能放在任何导入语句之后，否则不会触发客户端组件模式。
• 必须给Lottie容器设置固定的宽高，否则动画无法渲染。
• 动画JSON文件的路径要正确，建议放在public目录下，导入时注意路径对应。

内容的提问来源于stack exchange，提问作者Ahmed Mohammed