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

