Next.js hydration errors occur when the pre-rendered HTML compiled on the server mismatch the React DOM tree initialized on the client browser. Let's fix this.
1. Mismatched HTML Tags
A common trigger is nesting HTML block elements (like <div> tags) inside paragraph tags (<p>). Browsers automatically correct this by closing the paragraph tag, leading to a DOM structure mismatch.
2. Timezone and Dynamic Content
Rendering current dates (e.g., new Date()) directly inside layouts will mismatch because the server compiling the HTML is in a different timezone than the client browser. We solve this by rendering dynamic elements inside useEffect after mounting.
Conclusion
Ensuring HTML tag compliance and wrapping client-specific dynamic data inside mounted states eliminates hydration errors, keeping your layout transitions clean.