Next.js 错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配

Question

不知道是什么原因导致这个错误？

如果我删除以下代码，则不会显示该错误。

为什么这部分代码会导致此错误以及如何解决它？

      <div className="relative flex flex-col items-center pt-[85.25%] sm:pt-[56.25%] md:pt-[56.26%]">
        <ReactPlayer
          className="absolute top-0 left-0"
          url={`https://www.youtube.com/watch?v=u5-CF_k0KK0&list=RDu5-CF_k0KK0&start_radio=1&ab_channel=TumpyGFX`}
          width="100%"
          height="100%"
        />
      </div>

Answer 1

我的解决方案\xef\xbc\x9a

\n

import dynamic from 'next/dynamic'\n

\n

然后

\n

const TestimonialCard = dynamic(() => import('./TestimonialCard'), { ssr: false })\n

\n

希望能帮到你！

\n