Oct 7, 2022
Solving Next.js error "Hydration failed because the initial UI does not match what was rendered on the server"
TLDR - check to see if there is an error besides the hydration issue in your dev console.
While developing my personal site, I encountered the following error:
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
The accompanying URL was not helpful - this was not caused by usage of window
or a new integration with a styling library.
After a few minutes of Googling, I poked around in my console and found the following at the top:
Further down, I found the following:
Solving this issue (by changing my DOM structure, in this case) resolved the latter.