I am getting an error just creating a fresh Next.js app, without adding ANY code

I am getting an error just creating a fresh Next.js app, without adding any code.

npx create-next-app@14.2.22 --ts

Hi. Does not make sense that a fresh app without any code added is having an error.

The error message is: hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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.

Again, this is a fresh app, I don't add absolutely anything!!

Problem Explained:

I use Next A LOT - this is a common question/concern but is actually totally normal and working as expected. Next is letting you know, code is being injected that isnt from your app.

This happens often when you have browser extensions that modify code after next hydrates it which is why sometimes it is flagged as a hydration warning.

The obvious flag here is Date.now and Math.random, these are clearly not in your new app and is common code used in extensions. But dont worry this is SO easy to fix!

Solution Explained:

start removing chrome extensions such as Grammerly, css color pickers, or things like json converters that overlay the page etc.

If you do not have extensions like this then just remove them one by one (you can add them back easy). You'll notice that when you remove them, the error will no longer exist.

As soon as you find the extension causing the issue then simply disable it or do not use it while debugging your application. Boom, problem solved!

Feel free to add back any other extensions that do not inject code such as most developer extensions, for example: react dev tools, dev tools, redux toolkit etc

Personal Solution:

If you're like me and like to use a lot of extensions that are separate to your development, I suggest adding a dev profile to your chrome account.

That way you can switch back and fourth between profiles depending on what you are doing.

This way you do not have to keep disabling and adding extensions, you can just switch profiles so that way when Im debugging or working with my next app I have a simple nextdev profile with a bunch of dev extensions.