Common Issue: Hydration Errors in Fresh Next.js Apps
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
Hey everyone! It seems like we need a PSA because hydration errors caused by browser extensions are a frequent topic here. Let’s clear things up so you can troubleshoot effectively without clogging the channel.
## What are Hydration Errors?
In Next.js, hydration errors happen when the server-rendered HTML doesn’t match the client-rendered HTML. This can occur when something (like a browser extension) modifies the DOM in ways that Next.js didn’t expect.
## Common Culprits: Browser Extensions
The most notorious extensions we’ve seen include:
- Colorzilla
- Grammarly
- Video Speed Controller
These extensions add attributes and classes to your DOM, such as:
-
-
-
-
These additions interfere with Next.js’s ability to properly hydrate your application, throwing errors like the one in the attached example image.
## How to Fix It
1. Disable the Problematic Extensions
2. Use Incognito Mode
3. Still confused? Ask in #help-forum only if you’ve followed the above steps.
## What are Hydration Errors?
In Next.js, hydration errors happen when the server-rendered HTML doesn’t match the client-rendered HTML. This can occur when something (like a browser extension) modifies the DOM in ways that Next.js didn’t expect.
## Common Culprits: Browser Extensions
The most notorious extensions we’ve seen include:
- Colorzilla
- Grammarly
- Video Speed Controller
These extensions add attributes and classes to your DOM, such as:
-
cz-shortcut-listen-
data-gr-ext-installed-
data-new-gr-c-s-check-loaded-
vsc-initializedThese additions interfere with Next.js’s ability to properly hydrate your application, throwing errors like the one in the attached example image.
## How to Fix It
1. Disable the Problematic Extensions
2. Use Incognito Mode
3. Still confused? Ask in #help-forum only if you’ve followed the above steps.
