CODEWITHSUNDEEP
javascriptreactjsnext.jshydration
Nasem
Nasem

Reputation: 547

Next.js Error: Hydration failed because the initial UI does not match what was rendered on the server

Don't know what is causing this error?

If I remove the following code, the error doesn't get shown.

Why is this part of the code causing this error and how can I resolve it?

      <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>

Upvotes: 2

Views: 17300

Answers (2)

maxanderson
maxanderson

Reputation: 41

Ensure the HTML in your application is valid. Does the code snippet you included exist inside a <p> tag? This is usually the problem. See https://nextjs.org/docs/messages/react-hydration-error!

Upvotes: 4

大程子
大程子

Reputation: 104

my solution：

import dynamic from 'next/dynamic'

then

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

hope to help you!

Upvotes: 9

Related Questions