Why we almost exclusively use Next.js

Next.js is a popular open-source JavaScript framework for building server-side rendered React applications. Here are some of the reasons why you might want to consider using Next.js for your next project: SEO-friendly: Next.js has built-in server-side rendering capabilities, which can significantly improve your website's SEO by making it easier for search engines to crawl and index your content. Faster load times: Next.js allows you to easily implement code splitting, meaning your website will only load the necessary code for each page, making your website faster and more responsive. Improved developer experience: Next.js provides several features to improve the developer experience, including automatic code splitting, hot module replacement, and optimized server rendering. Static site generation: Next.js supports static site generation, which means you can generate your website as static HTML files that can be deployed to a CDN, improving website performance and reducing hosting costs. Extensive documentation and community support: Next.js has an active and supportive community, and extensive documentation is available to help you get started and troubleshoot any issues you encounter. Financial backing: It's also pretty much bankrolled to the same level as React or any other top player in the industry, meaning it can hire pretty-much whoever it wants and support incredible frameworks such as Svelte and Turborepo.

What's a common cause for UI hydration issues?

It's most likely due to incorrectly nested code, such as a <a> tag within a <a> tag. Whenever you see a UI hydration issue, we would almost always recommend pulling out the inspect tab and looking for some dodgy semantics. Because it's almost always been the case for us. What makes this trickier is that each browser seems to resolve these issues in its own way. We always advise tracking it down in Chrome first because we've experienced better console logging. If you're really struggling we advise breaking your app or website down, component by component, commenting it out, until you no longer see the error anymore. Then work out what it is inside that particular component that keeps breaking things.

Why Next.js keeps talking about Hydration issues

Reading time

1 min read

Published on

February 28, 2023

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.