3 happy cats with a nice hat

Why Next.js keeps talking about Hydration issues

Reading time

Published on

Tags


If you've recently upgraded to Next 13, there's a good chance you've come across this issue.

This gosh darn issue about hydration failing

To stop you from scouring the web and pulling your hair out, let me give you a quick fix that I reckon 9 of 10 times is the issue.

It's Next/Link. You've probably not read the changelogs... Honestly, who does?

Run the new-link codemod

This is the link you're looking for

Or if you're lazy and just want the code, it's below.

npx @next/codemod@latest new-link

Still doesn't work?

There's still a pretty decent chance that the codemod hasn't picked up on links. For example, we used Next/Link within a component which we passed down, which the codemod didn't catch.

In this case, the way we found it was by commenting out parts of the code and seeing whether hydration issues were/weren't appearing to narrow down the offending code.

Fancy learning some more

We've got our fair share of war wounds from tracking down rogue code and code-modding our websites & apps. Here's some tips and tricks that might lead to a longer life by not raising your blood pressure by scrambling through VS Code.