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.