I have some warnings such as hydration warnings in nextJs, which just show in my local host and every thing is ok in stage and production .
I've tried to solve hydration warnings before but because of using random values in some cards get this type of warning again, considering they are generating just in local host can i ignore and do nothing with them? and why they are in local host console but aren't in stage and production?
Next.js hydration errors are caused by a mis-matched DOM. There a few ways you can go about fixing it:
A lot of times a persistent hydration error is caused by invalid HTML. Just double just your HTML is semitic.
From the official Next.js docs:
Incorrect nesting of HTML tags
nested in another
tag nested in a
tag or nested in a
tag Interactive Content cannot be nested ( nested in a tag, > nested in a tag, etc)
Browser only apis like window should be avoided in Next.js. However, if you must use them they need to be inside a client component with useEffect.
Try running the project in a private window with no extensions and see if the issue is resolved. Certain extensions may cause this error.
These are only supported in client components
From the Next.js docs:
OS attempts to detect phone numbers, email addresses, and other data in text content and convert them into links, leading to hydration mismatches. This can be disabled with the following meta tag:
<meta
name="format-detection"
content="telephone=no, date=no, email=no, address=no"/>
Simply add the suppress hydration error on anyone of your components. Just add the <MyComponent suppressHydrationWarning />.
It's recommended my to try all the above fixes before suppressing or ignoring the error as it does impact performance.
For more information visit the Next.js docs.