Must i resolve warnings which just show in local host or ignore them?

Question

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?

Answer 1

Next.js hydration errors are caused by a mis-matched DOM. There a few ways you can go about fixing it:

Check your HTML markup

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)

Using browser only apis in server components

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.

Browser extensions

Try running the project in a private window with no extensions and see if the issue is resolved. Certain extensions may cause this error.

CSS in JS libraries

These are only supported in client components

IOS with safari bugs:

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"/>

Suppress the hydration error (last resort)

Simply add the suppress hydration error on anyone of your components. Just add the <MyComponent suppressHydrationWarning />.

Conclusion and additional resources

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.