Next.js Hydration failed because the initial ui does not match what was rendered on the server (FIX)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Intro
0:11 Solution 1
1:56 Solution 2
2:32 Solution 3
5:13 Solution 4
5:45 Solution 5
6:21 Solution 6

#webdevelopment #coding #programming

[arhamkhawar]

You can also dynamically import a component that e.g uses window object like this:

import dynamic from 'next/dynamic';

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });

Then you can use ReactQuill in the JSX.

[samyakpiya]

1:50 I didn't know we couldn't put an image tag inside of an anchor tag or next.js link tag. How would we otherwise make it so that an image is also a clickable link then? Great content btw!

[kxmode]

Regarding the first cause, the reason this happens is because block-level elements, such as <h1>, <div>, and so forth, are blocks with defined "space" (even if the space is 0 px by 0 px) and cannot be placed inside an inline element (an HTML element with no defined space). This is akin to placing an object inside a void. :)

[ederross]

Man.... You are a genius! Saved my project...

These are my baby steps... on Next JS... thank you!!

[bernardopapini]

Thank you, guy. With 50 seconds of your video I could solve my bug. You're a hero!

[adriancmiranda]

You just saved my project. Thank you, dude!

[tranquillityEnthusiast]

Suppresshydrationwarning is not working in latest nextjs

[Alex-bcxe]

I really love your tutorials. Thanks and keep going.

[liwen]

why not just checking if the `window` is undefined or not?

[hm.till-]

I have that exact issue because of a browser extension. I think that just disabling the extension doesn't solve the problem. If one of my users uses an extension like that an gets send error screens that they don't understand that makes a horrible UX. Does anyone know if there is any way to disable or catch the errors?

[shivampuri]

That isClient method worked for me! Thanks ❤

[arturhonores]

Muchas gracias!! el mejor video sobre el tema

[siphamandlambokazi]

Thanks alot my brother, my issue was caused by MUI and useEffect trick work

[dorrakadri]

thank you it was the color picker extension for me -.-

[lukecartwright]

When using Links in Next JS the tailwind classes don't get passed to the anchor tag. So a solution is to add an anchor tag inside of a Link and adding the className to the sub anchor tag.
Is there another solution?

[gauravsinghtangariya]

I opened this video and found the solution at 1:07

[tedogirma]

i do subscribed buddy Thanks nice tip