Next13 如何将“use client”应用到“loading.js”

Question

我在loading.js中写了一个lottie组件

我使用应用程序路由器（Next13）

洛蒂组件

import { Player } from '@lottiefiles/react-lottie-player';

import LoadingLottie from '@/assets/loading.json';

function LoginLoadingComponent() {
  return (
    <Player
      loop
      src={LoadingLottie}
      autoplay
      style={{ width: '100px', height: '100px' }}
    />
  );
}

正在加载.tsx

'use client';

function loading() {
  console.log('test');
  return (
    <div>
      <LoginLoadingComponent />

      <h2 className="font-bold text-2xl text-center">채널 분석 중 로딩로딩</h2>
    </div>
  );
}

我想在加载时使用“@lottiefiles/react-lottie-player”库..

但是lottie组件没有应用“使用客户端”

我不知道还能做什么......

Answer 1

就客户端组件而言，在

LoginLoadingComponent

之上添加“使用客户端”应该足够了。如果您遇到任何特定错误，请相应更新您的问题。

Answer 2

这里同样的错误。我在 NextJS 上打开了一个问题 https://github.com/vercel/next.js/issues/67538

有消息如何解决这个问题吗？