Update react-hydration-error.mdx (#63455)

Adding a very common cause for hydration errors

---------

Co-authored-by: Sam Ko <sam@vercel.com>
This commit is contained in:
Valentin Hervieu 2024-03-19 22:41:28 +01:00 committed by GitHub
parent 430e71a38d
commit 203f6a8691
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -19,10 +19,11 @@ Hydration errors can occur from:
4. [Interactive Content](https://html.spec.whatwg.org/#interactive-content-2) cannot be nested (`<a>` nested in a `<a>` tag, `<button>` nested in a `<button>` tag, etc.)
2. Using checks like `typeof window !== 'undefined'` in your rendering logic
3. Using browser-only APIs like `window` or `localStorage` in your rendering logic
4. [Browser extensions](https://github.com/facebook/react/issues/24430) modifying the HTML
5. Incorrectly configured [CSS-in-JS libraries](https://nextjs.org/docs/app/building-your-application/styling/css-in-js)
4. Using time-dependent APIs such as the `Date()` constructor in your rendering logic
5. [Browser extensions](https://github.com/facebook/react/issues/24430) modifying the HTML
6. Incorrectly configured [CSS-in-JS libraries](https://nextjs.org/docs/app/building-your-application/styling/css-in-js)
1. Ensure your code is following [our official examples](https://github.com/vercel/next.js/tree/canary/examples)
6. Incorrectly configured Edge/CDN that attempts to modify the html response, such as Cloudflare [Auto Minify](https://developers.cloudflare.com/speed/optimization/content/auto-minify/)
7. Incorrectly configured Edge/CDN that attempts to modify the html response, such as Cloudflare [Auto Minify](https://developers.cloudflare.com/speed/optimization/content/auto-minify/)
## Possible Ways to Fix It