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

Error : 

Why : 

While rendering your application, there was a difference between the React tree that was pre-rendered from the server and the React tree that was rendered during the first render in the browser (hydration).

 

Solution :

 

import { useState, useEffect } from 'react'
 
export default function App() {
  const [isClient, setIsClient] = useState(false)
 
  useEffect(() => {
    setIsClient(true)
  }, [])
 
  return <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}

 

 

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

Text content does not match server-rendered HTML