Alt textAlt text

Why Next.js keeps talking about Hydration issues

Reading Time

1 min read

Published on

February 28, 2023




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?

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.



Like what you see ?

Sign up for a 30 min chat and see if we can help

© 2024 Roboto Studio Ltd - 11126043

Roboto Studio Ltd,

86-90 Paul Street,

London, EC2A 4NE

Registered in England & Wales | VAT Number 426637679