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
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
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
The above is the detailed content of Hydration error when installing NextJS 15. For more information, please follow other related articles on the PHP Chinese website!