After creating a new next 15 project and
npm run dev
if see these error in your development server:
Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
- A server/client branch
if (typeof window !== 'undefined'). - Variable input such as
Date.now()orMath.random()which changes each time it's called. - Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Here is the solve
use this suppressHydrationWarning attribute in your layout.tsx file
return (
<html lang='en' suppressHydrationWarning>
if this doesn't solve your problem, then So far these are the mentioned extensions that cause hydration errors I have seen here. You guys can add up further names to gather them in a single place to help other fellow devs:
1 - ColorZilla
2 - Wappalyzer
3 - Urban VPN
4 - LastPass
5 - Hacker Vision
6 - WhatFont
7 - Video Speed Controller for HTML videos
8 - Glot
9 - AI Grammar Checker & Paraphraser – LanguageTool
10 - Grammarly
11 - Invert
12 - Dashlane
Top comments (0)