Warning: Prop className did not match. Server: Client:


import { useEffect, useState } from 'react'

function MyComponent() {
  const [color, setColor] = useState('blue')
  useEffect(() => setColor('red'), [])
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

react-hydration-error | Next.js

While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a feature of React.

https://nextjs.org/docs/messages/react-hydration-error

Warning: Prop `className` did not match. Server: Client:

Recommendations