After migrating my page from an old version to the current 15.x, I've been dealing with hydration errors related to hydration. See the screenshots below:
Unhandled Runtime Error
Expected server HTML to contain a matching <div> in <a>.
and
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
It seems that the client-side HTML doesn't match the precalculated content on the server. This is surprising considering I used the 'use client' statement in the component.
I tried consolidating all issues into a single button component using a next/link. Despite simplifying it, the component continues to generate hydration errors in the console. I experimented with removing the container element and various other methods, but the issue persisted:
'use client'
import React from 'react'
import Link from 'next/link'
const ButtonComponent = function () {
return (
<button>
<Link href="/">Button</Link>
</button>)
}
export default ButtonComponent
However, once I removed next/link, all hydration errors disappeared:
'use client'
import React from 'react'
const ButtonComponent = function () {
return (
<button>
Button
</button>)
}
export default ButtonComponent
This solution is not ideal as I want a reusable button that accepts children and href props for rendering purposes.
How can I resolve this issue? Am I misunderstanding something?
[]