Hydration error when installing NextJS 15

VPN
1

Well as title says. I do a “npx create-next-app@latest”, since yesterday NextJS 15 got released, it installs next version 15.0.1. Now when I run “npm run dev” (since when I run bunx create-next-app@latest it doesn’t give me an option for NextJS 15) and when I go to localhost:3000 it says Hydration error by default and I didn’t modify anything. It also says for all the projects I upgraded to NextJS 15. Says same error every time:

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()` or `Math.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

-__processed_f981a6b0-01e9-41e5-b0f3-ce498d673703__="true"
-bis_register="W3sibWFzdGVyIjp0cnVlLCJleHRlbnNpb25JZCI6ImVwcGlvY2VtaG1ubGJoanBsY2drb2ZjaWllZ29t..."

Now I don 't know if I missed reading something but there are no mentions of this, only that they updated Hydration errors to better?

Also if nextjs15 is compatible with bun and I don’t know actually how to install it with bun, I would appreciate that if someone knows since I searched everywhere for it.

Thank you in advance :slight_smile: !

2

no need to remove extensions … in layout.tsx use this

return (
    <html lang='en' suppressHydrationWarning>
3

Based on the error message there, those looke like Chrome or Firefox extensions causing problems. Do you still see the issue in incognito?

4

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

13 - Auto Refresh Plus | Page Monitor

5

so any extension at this point

6

For me , I removed Grammarly Extension It worked

7

grammarly is the culprit for my hydration error

8

Grammarly causes the hydration error

9

Uninstall ColorZilla Chrome extension.

10

For me, it is the duplication of children

return (
    <html lang='en'>
      {/* <body>{children}</body> */}
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
11

First, I’d like to thank you guys. I spent 2 hours trying to figure this out. For me, it was “AI Grammar Checker & Paraphraser – LanguageTool” in Firefox.

12

for me it was “AI Grammar Checker & Paraphraser – LanguageTool” extension

13

For me, after I removed the ColorZilla Chrome extension. It is working now!

14

It was Urban VPN for me

15

It was “Invert!” for me.

16

For me it was Urban VPN Extension

17

meu caso a extensão do colorzilla esta causando este erro

18

for me it’s dark reader chrome extension causing this !

19

it work when i remove extension error resolved.

20

can anyone explain why this error occurs for the default nextjs code?