Why Next.js keeps talking about Hydration issues

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

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.

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.