CODEWITHSUNDEEP
next.jsserver-side-renderinghydration
Logitech
Logitech

Reputation: 115

Next.js 15.0.3. Hydration failed because the server rendered HTML didn't match the client

I created the project with npx create-next-app@latest./ When starting the project, there is an error "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".

I tried removing the template that was set to default and left a blank page:

page.tsx: export default function Home() { return (<div>Test</div>); }

The mistake has not disappeared. I tried the older version next.js 14.2.1, there is no such error.

Settings:

Would you like to use TypeScript? » Yes

Would you like to use ESLint? » Yes

Would you like your code inside a src/ directory? » Yes

Would you like to use App Router? (recommended) » Yes

Would you like to use Turbopack for next dev? » No

Would you like to customize the import alias (@/* by default)? » No

Upvotes: 5

Views: 4727

Answers (4)

Dawit Zewdu
Dawit Zewdu

Reputation: 1

no need to remove extensions ... in layout.tsx add suppressHydrationWarning like in the down code and the error will disappear. use this

return (
    <html lang='en' suppressHydrationWarning>

Upvotes: 0

Wahed Sikder
Wahed Sikder

Reputation: 1

Mine is the Auto Refresh Plus extension. I have disabled it and the error is gone!

Upvotes: 0

Alessander Franca
Alessander Franca

Reputation: 2771

In my case it was colorzilla extension, i had no errors anymore after I disabled it

Upvotes: 2

Logitech
Logitech

Reputation: 115

Well, the error was given due to the VPN extension. The VPN itself wasn't enabled, but the error still appeared... I just disabled this extension and everything works as it should.

Upvotes: 6

Related Questions