Hydration failed because the initial UI does not match what was rendered on the server

[gd-cho]

Edit @leerob: Related: react/react#24250

---

When I use getStaticProps to get the json data and show data to the pages that has this problems.

problem 1

Hydration failed because the initial UI does not match what was rendered on the server

problem 2

Text content does not match server-rendered HTML.

problem 3

There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

that is my getStaticProps code:

export const getStaticProps = async (context) => {
  const filePath = buildFeedbackPath();
  const data = await extractFileData(filePath);
  return {
    props: {
      data,
    },
  };
};

[thibautsabot]

Hello.

Could you share the rest of the page? Or even a link to your repository?

What version of Next.js and React are you using?

[gxanshu]

It's likely that you have a mismatch between the server output and the client. Before React 18, you'd only get an error in your browser's console, but with the new major you will encounter that popup.

You should check the console for errors like:

Warning: Expected server HTML to contain a matching <div> in <div>.

and fix them.

it's work after rechecking the DOM and fixing some closing tag issue thanks

[beaumontyun]

After checking the console for warnings I realized I had some HTML that was not properly structured. I refactored the code and the error dissappeared.

Can confirm refactoring worked. There were 4+ components within a single page on my code, I had originally meant to clean up the code until this error appeared. Refactoring each component to a separate file resolved the issue.

[zubeirarhesta]

I got this "Warning: Expected server HTML to contain a matching in "
but I never find nor I can't recall I have in in my code. why this happened?

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <i> in <a>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
i
a

[tekinalpturk]

Thank you, this resolved my issue too. In my case, I put it out of my CustomTabPanel component and my problem resolved.

[sheebaboy33]

Worked for me too. Thank you

[austins]

I also get this error:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    EventHandlerNonNull* scheduler.development.js:571
    <anonymous> scheduler.development.js:633
    NextJS 4
    <anonymous> index.js:6
    NextJS 4
    React 2
    NextJS 4
    <anonymous> React
    NextJS 4
    <anonymous> index.js:10
    NextJS 4
    <anonymous> next-dev.js:2
    NextJS 7

This only occurs with React v18. Downgrading to v17.0.2 doesn't have this issue.

"react": "^18.0.0",
"react-dom": "^18.0.0",
"next": "^12.1.4",

One of my repos that produce this error (I've reverted it back to React v17.0.2 for now): https://github.com/austins/smoothnanners-web

[SamuelB7]

Thanks!

[simplyDonald]

any performance issues with setting ssr to false?

[DVChieu-99]

so much thanks!!👍

[prkagrawal]

This works

[Xpow22]

I have an error like this

Error: Hydration failed because the initial UI did not match the one rendered on the server.

Warning: The server HTML is expected to contain a matching

in the

.

How to fix it, does anyone know?

[sarmadiAli]

i get this error in next with react v18 :///////////////////////// i change react v18 to 1v and fixed

[giordifungula]

is there a react 18.v1 ?

[psavan1655]

#35773 (comment)
Try this one. It will fix the issue with react v18

[c-plus-plus-equals-c-plus-one]

lol you made my day!

[Gtstride]

You need not downgrade, all that is required is to add <a> </a> inside of <Link></Link> tag. So your code should look somewhat like <Link href="/about-us"><a>Link goes here</a></Link>

[Viistorrr]

fix in React v18 ==> Use dynamic import instead, that works. Check this 👇🏾#35773 (comment)

[001123]

I have the same issue.

• React 18.0.0
• Nextjs 12.1.4

[zangbianxuegu]

I had the same issue, It was caused by localStorage, because the render tree between pre-render(SSR/SSG) and the frist render in broswer is different. Read the Doc: https://nextjs.org/docs/messages/react-hydration-error

[maxcountryman]

@zangbianxuegu how did you fix it?

[zangbianxuegu]

@maxcountryman You can refer to this: https://stackoverflow.com/questions/74579757/how-to-fix-error-hydration-failed-because-the-initial-ui-does-not-match-what-wa

View Page Source(pre-render), compare with the page result(first render), there will be different.

Use useEffect.

This solves the issue because useEffect only runs on the client-side, therefore you will effectively match both server-side and client-side first render content.

[phootako630]

I solved it by using dynamic importing:
`import dynamic from "next/dynamic";

const MyComponent= dynamic(() => import("./MyComponent"), {
ssr: false,
});`

[kumbajirajkumar123]

I have the same issue ,but i can't able to figure out ,anyone could help please!

Error Stack Trace

webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in throwOnHydrationMismatch at line 12507:9
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in tryToClaimNextHydratableInstance at line 12520:7
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in updateHostComponent at line 19897:5
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in beginWork at line 21613:14
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in HTMLUnknownElement.callCallback at line 4164:14
webpack-internal:///./node_modules/@sentry/browser/esm/helpers.js in HTMLUnknownElement.sentryWrapped at line 99:17
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in Object.invokeGuardedCallbackDev at line 4213:16
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in invokeGuardedCallback at line 4277:31
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in beginWork$1 at line 27446:7
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in performUnitOfWork at line 26552:12
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in workLoopSync at line 26461:5
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in renderRootSync at line 26429:7
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js in performConcurrentWorkOnRoot at line 25733:74
webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js in workLoop at line 266:34
webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js in flushWork at line 239:14
webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js in MessagePort.performWorkUntilDeadline at line 533:21

[markmendozadev]

I got this error too anyone have solution? not sure what went wrong lol

[psavan1655]

#35773 (comment)

Try this. It will work

[icyJoseph]

Take it easy with upgrading to React 18.

In my case, I simply upgraded to React 18, fixed a dependency that did not work with React 18, and then my build pipeline worked.

I hope this is not a global thing. Rather I think it might be a project by project issue.

Things to look out for:

• Are you breaking pure behaviour where expected? Use strictMode: true in next.config.js, and see if you get the same errors.
• Some of you dependencies might not be ready to work with React 18
• You may have "Divergent HTML" code, which before React 18 was silently working.

Please do share as much info as possible, next info via npx next info should be at least included.

---

Edit: I am assuming here, that things work normally with React 17. Preventing divergent HTML is key to isomorphic/universal JavaScript, which is what we do with SSR (not only Next.js), the dry HTML rendered by the server has to match the client first frame.

[greym0uth]

Do we really have much of a choice? create-next-app defaults to installing react 18...

[giordifungula]

yeah thats a good point, react installs 18 by default. Im migrating from older project to a new one and having this issue. But I think its dependency specific, there is a specific dependency we are using(@rpldy/uploady) which does not seem compatible with react v 18

[oallouch]

I had the same issue.
I had some components only rendered on the client. For that I checked window.
To solve it, I changed

const isSSR = typeof window === "undefined"

to

const [isSSR, setIsSSR] = useState(true);

useEffect(() => {
	setIsSSR(false);
}, []);

Then, in my jsx, I can do
{ !isSSR && <div....

[ghost]

And it's always good to remember that you can turn the JSX into a single component, and then do a dynamic(() => import(), {ssr: false}) combo on it, with ssr set to false and no loader, does nearly the same thing.

Adding {ssr: false} to dynamic imports fixed the issue for me.

[MdWahiduzzamanEmon]

const [isSSR, setIsSSR] = useState(true);

useEffect(() => {
setIsSSR(false);
}, []);

this work for me . thanks 😁

[sahedalways]

const ISSERVER = typeof window !== 'undefined';

const initialState = {
products: data,
cart:
ISSERVER && localStorage.getItem('cart')
? JSON.parse(localStorage.getItem('cart'))
: [],

wishlist:
  ISSERVER && localStorage.getItem('wishlist')
    ? JSON.parse(localStorage.getItem('wishlist'))
    : [],

quantity: 0,

};
why this kind of error? please help me. I am in stack !!

[smahalakshmikumar]

Bro you just saved my life :) I was breaking my head with different solutions and this worked for me
thank you so much !!

[ELHart05]

I had the same issue. I had some components only rendered on the client. For that I checked window. To solve it, I changed

const isSSR = typeof window === "undefined"

to

const [isSSR, setIsSSR] = useState(true);

useEffect(() => {
	setIsSSR(false);
}, []);

Then, in my jsx, I can do { !isSSR && <div....

that worked, thanks!!

[oallouch]

No, you're right. I only added it with React 18.
And for the SEO, it's ok because it's only 3D content (with React Three Fiber).

[LuckeeDev]

I don't know if it's the same for you, but I had the same error when transitioning to React 18 because I was storing the server side data into a useState hook inside a component and then I was mutating the state data directly in a useMemo function (which is wrong, but I hadn't noticed it before the switch to React 18!).

[jordontgarcia]

Getting the same error when upgrading to React 18 when using useState for dark mode feature.

[jamesryan-dev]

@JordonGarcia Could you link to your repo by any chance as after implementing this solution I'm still getting this error :(

[chuygil]

This has been documented in the next-themes repo for a while, but I am also still having this same issue even after checking if page hasMounted.

[jamesryan-dev]

Thanks - yes it turns out I used this Jordan's solution for the Button but not the component which was utilising the Dark Mode - Thanks all!

[jbeckton]

This is absolutely on the React side. You can prove this with most any responsive component utility. Just print a single piece of markup that will be one thing on the server and something else in the browser and you will see this hydration error.

<div>isDesktopOrLaptop: {isDesktopOrLaptop ? 'YES' : 'NO'}</div> Since the server cannot determine the device or screen width without the browser the SSR page will render 'NO' but once it's in the browser it will render 'YES' and this causes the hydration error.

[v1shva]

I used a similar approach to one in solution to fix error Error: Hydration failed because the initial UI does not match what was rendered on the server. when using https://github.com/yocontra/react-responsive , workround

[omanramalho42]

Eu tenho o mesmo erro também e apareceu do nada.

[shadtek]

Olhe para ver se seu html esta escrito errado. Eu tinha <li> dentro de <p>, que nao pode ter, por exemplo.

[davidtavares]

Particularly in my project, I've realized it occurs when there are quotes (single or double) within <style>{``}</style>
e.g.:
background-image: url(background.jpg); IT WORKS
background-image: url('background.jpg'); IT DOES NOT

[kevinmanncito]

wow, that was my issue, thanks!

[rmfigue]

Thank you, apparently it works for me

[WillSelway]

Thank you solved the issue for me!

[hseoy]

wow,,, thanks!

[jakejarvis]

My problems were all related to manipulating dates without taking time zones into account. The dates from raw data/APIs were being parsed/formatted into human-readable strings at build time on Vercel's server with its timezone (GMT probably?) and then the same process was happening on the client side with the user's timezone, resulting in different HTML.

So nothing "broke," it just seems React 17 didn't care about this. 😆

[facundo1cabrera]

Thanks for the comment, i solved my issue

[leo-at-itartpro]

Im bulding a very similar project. How did you fix this? My current solution is to stick suppressHydrationWarning everywhere...is there a more universal solution? This shouldn't be an error, its so frustrating

[kirbdee]

I haven't been seeing this error in my local build, but only happens when it gets pushed to vercel

I'm getting 3 errors

• Text content does not match server-rendered HTML.
• Hydration failed because the initial UI does not match what was rendered on the server.
• There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

My setup isn't doing anything fancy, it's pretty basic and don't have any set props or async calls that could cause some kind of desync / gap

[kirbdee]

Update on this.

I was able to simply force this logic client side only by wrapping it in a useEffect.

[kirbdee]

@gd-cho not sure what that extract function does but it might have some date/time that is causing a mismatch on the client rehydrate/render.

You could try the above solution, or maybe instead of an static prop, you could serve it as an API with a longer cache age

[gd-cho]

yes, I fix that when I use useEffect hook

[jakejarvis]

@kirbdee glad that could help somebody! I'm trying date-fns-tz now to make the client/server timezones the same but it seems there are many different ways to accomplish this, some easier than others...

[codesport]

@jakejarvis and @kirbdee

Thanks for the hint and details on the date issue. I was converting a date in my Next.js render() No complaints on the local dev machine. But got the error on production.

Your hints helped me to track and eliminate this bug.

As a quick hack. I'm leaving the date as ISO 8660 until I have time to get in the weeds and dynamically render browser in local time

PS: This is the code in render() that caused the hydration issue: new Date(repo.updated_at).toString()

[gd-cho]

there I have new problem for Hydration.

I have this problem was when I convert the date attribute, that has a problem to me.

Warning: Text content did not match. Server: "2021/10/30 上午8:00" Client: "2021/10/30 08:00"

const PostDetail: NextPage<IPostDetail> = (props) => {
  const { title, content, date, excerpt, slug, image } = props;

  const imgPath = `/images/posts/${slug}/${image}`;

  const humanReadData = new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: 'numeric',
    minute: 'numeric',
  });

  const transformImage: (
    src: string,
    alt: string,
    title: string | null
  ) => string = (src) => {
    return `/images/posts/${slug}/${src}`;
  };
  return (
    <article className={classes.main}>
      <header className={classes.header}>
        <div className={classes.title}>
          <h1>{title}</h1>
          <time>{humanReadData}</time>
        </div>
        <div className={classes.img}>
          <Image src={imgPath} alt={'error'} layout="fill" />
        </div>
      </header>
      ...
    </article>
  );
};
export default PostDetail;

using useEffect hook , I fixed this problem. but this is too bloated

const PostDetail: NextPage<IPostDetail> = (props) => {
  const { title, content, date, excerpt, slug, image } = props;

  const imgPath = `/images/posts/${slug}/${image}`;

  const [newDate, setNewDate] = useState<string>();

  useEffect(() => {
    const humanReadData = new Date(date).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: 'numeric',
      minute: 'numeric',
    });
    setNewDate(humanReadData);
  }, [date]);

  const transformImage: (
    src: string,
    alt: string,
    title: string | null
  ) => string = (src) => {
    return `/images/posts/${slug}/${src}`;
  };

  return (
    <article className={classes.main}>
      <header className={classes.header}>
        <div className={classes.title}>
          <h1>{title}</h1>
          <time>{newDate}</time>
        </div>
        <div className={classes.img}>
          <Image src={imgPath} alt={'error'} layout="fill" />
        </div>
      </header>
      ...

[Mostak-Ahamed-Nishat]

This problem happened to me when I tried to render my component as client-side rendering, and it mismatched with hydration. so I disabled hydration during client-side rendering to fix this problem.

The given method below worked for me

import dynamic from 'next/dynamic' 

function Mycomponent(){
   return (
     <h1>Hello world<h1/>
  )
}

export default dynamic(() => Promise.resolve(Mycomponent), { ssr: false });

[YolanCr-dev]

Thanks!!! this worked!

[valleywood]

But in this way you are actually preventing Mycomponent from being rendered server side (which is one of the greatest benefits with next.js in the first place) so this isn't a solution. You are just hiding the problem with that the server-side rendered, dynamically loaded code, cannot be hydrated. (since there are no server side rendered code to be hydrated if you specify { ssr: false }

[IonelLupu]

@valleywood Yeah. I noticed people don't really know what that does when they recommend it.

I ended up using default values for my component so it get's rendered both on the server and client

[sksbkt]

thank you, it worked mate

[Mheaus]

From everything I read on X/Twitter and Github issues/discussions.
I really hope we'll have in future releases :

1. a way to be able to move actual errors logs such as : Warning: to "warning" level (console.warn)
2. a (better) way to debug hydration issues
3. other alternatives than using next/dynamic with ssr false or suppressHydrationWarning

In many cases, I feel like it's a good thing to have something close to what I'll render from the server first, then update it at "client phase".
So maybe the way to go is using more Suspense stuff or idk, but it would be very cool to be able to tell next "it's okay, this is not the way you want this to go, you want the content not to change but I know what I'm doing" kind of stuff.
You would say "this is exactly what suppressHydrationWarning is for", but in reality, it's very difficult to find the right place to put it
to remove all warnings and it's annoying to add custom attributes to ignore errors everywhere.

To rephrase, it would be cool to have a way to tell "the content of 'this' is going to change at hydration" instead of "suppress any error hydration related coming from this element" without messing with imports or adding custom attributes.
I don't know what the solution could be, maybe a new helper component from next similar to Suspense in some way?
But I definitely think it's an important matter to address, I feel like people get really lost when they see these errors.

I really like RSC stuff, thanks for the hard work on Next otherwise.

https://twitter.com/search?q=nextjs%20hydration%20errors&src=typed_query

[ancyrweb]

Happened to me because I was trying to use dangerouslySetInnerHTML in which I was rendering a p nested inside a p.
The ValidateDOMNesting method somehow fails but the error doesn't bubble up to the browser so the cause is lost.
Fixed by replacing the p in which I was trying to render by a div

[jarenreber]

Interestingly enough I had this error happening and after turning off the Last Pass extension it went away. It makes sense as Last Pass adds a div that the server didn't send so client panics.

[uraden]

Got this issue:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <div>.

Solution:

from:
export default YourPage;

to:

import dynamic from "next/dynamic";
.
.
.
.
export default dynamic(() => Promise.resolve(YourPage), { ssr: false });

[IonelLupu]

Don't you loose the SSR ability doing this? Open your page on a slow network and check if something is rendering or if the user needs to wait for the entire JS code to be downloaded

[sanjaya1996]

In my case

1. li tag was nested inside another li

<li>
     <li>
         I am nested li causing this weird error 'Hahahaha'
     </li>
</li>

2. I was using react-responsive library and there was a typo, closing bracket was missing for useMediaQuery query string
   const isMedium = useMediaQuery({ query: '(max-width:850px' });

So, definitely upgrading/downgrading React 18 solution of @austins may not be an ideal solution for everyone.

[MBelniak]

In my case the root cause was having <body> tag in non-root layout file. See https://stackoverflow.com/questions/75423463/warning-you-are-mounting-a-new-body-component-when-a-previous-one-has-not-first
Might help someone.

[RonaldGuilhermePDS]

Thx!!!

[Ankit-11525]

I got the same error! of 3 pages on using
<input
type="color"
name="bgColor"
onChange={(ev) => setBgColor(ev.target.value)}
defaultValue={bgColor}
/>

by using the type="color"
when i am removing the type="color" then error gone
please help!

[frempongandrews]

Problem occurred when using the react player. Mounting the player only on the client solved the issue for me. Here's the quick solution:

`const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
	setIsMounted(true);

	// component will unmount
	return () => {
		setIsMounted(false);
	};
}, []);`

{isMounted ? ( <div className="relative bg-green-600 border-2 border-white h-[80vh] w-[100%]"> <ReactPlayer muted={true} playing={true} className="absolute top-0 left-0 border-2 border-blue-600" url={https://www.youtube.com/watch?v=mqqft2x_Aa4`}
width="100%"
height="100%"
loop={true}
/>

) : null}`

[xyz1hang]

Problem occurred when using the react player. Mounting the player only on the client solved the issue for me. Here's the quick solution:

`const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
	setIsMounted(true);

	// component will unmount
	return () => {
		setIsMounted(false);
	};
}, []);`

{isMounted ? ( <div className="relative bg-green-600 border-2 border-white h-[80vh] w-[100%]"> <ReactPlayer muted={true} playing={true} className="absolute top-0 left-0 border-2 border-blue-600" url={[https://www.youtube.com/watch?v=mqqft2x_Aa4}](https://www.youtube.com/watch?v=mqqft2x_Aa4%60%7D) width="100%" height="100%" loop={true} /> ) : null}

Love the Batman trailer link

[Rahul-Bhati]

I just install the npx create-next-app@latest and run it :

[icyJoseph]

Try in incognito mode. Most likely an extension you have installed is causing the issue, or rather triggering it.

[Rahul-Bhati]

thanks, it worked in incognito mode.

[odafeaggreh]

For me, it was the Grammarly extension. I turned it off and the error went away.

[yctercero]

Hi there! I'm hitting this error as well.

Seemed to hit it when using react-select.

[ATLAS-B28]

Error: 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.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

...

<ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}>

<HTTPAccessFallbackBoundary notFound={}>
<HTTPAccessFallbackErrorBoundary pathname="/sign-up" notFound={} ...>




<script>
<script>


<body
className="poppins_aacda59c-module__JpBSjW__variable font-poppins antialiased"

•                   data-new-gr-c-s-check-loaded="14.1215.0"
  

•                   data-gr-ext-installed=""
                  >
              ...
    ...
  

  at createUnhandledError (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_523921._.js:689:49)
  at handleClientError (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_523921._.js:856:56)
  at console.error (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_523921._.js:987:56)
  at emitPendingHydrationWarnings (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:2768:103)
  at completeWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7238:102)
  at runWithFiberInDEV (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:631:20)
  at completeUnitOfWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:8020:23)
  at performUnitOfWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7957:28)
  at workLoopConcurrent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7951:58)
  at renderRootConcurrent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7933:71)
  at performWorkOnRoot (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7565:175)
  at performWorkOnRootViaSchedulerTask (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:8394:9)
  at MessagePort.performWorkUntilDeadline (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:2353:64)

• Can someone explain whats this and what to do about it.

[icyJoseph]

That's Grammarly extension messing, or triggering, things up. Remove it or add a supressHydrationWarning to body

[ATLAS-B28]

Thanks will definitely try this solution

[DemisRincon]

I could fix it with a clue that someone gave

Setup
"framer-motion": "^12.0.3",
"next": "15.1.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.4.0",
"react-intersection-observer": "^9.15.1",
"styled-components": "^6.1.14"
Language
Typescript

I just updated on next js 15 and face this problem
The idea I just developed was to perform a validation to make sure Component is client side trought a HOC (High Order Component)

Now the HOC

import React, { ComponentType, useEffect, useState, ReactNode } from "react";

const withClientValidation = <P extends object>(
  Component: ComponentType<P>
) => {
  const HOC: React.FC<P & { children?: ReactNode }> = ({
    children,
    ...restProps
  }) => {
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
      setIsClient(true);
    }, []);

    return (
      <>
        {isClient ? (
          <Component {...(restProps as P)}>{children}</Component>
        ) : null}
      </>
    );
  };
  return HOC;
};

export default withClientValidation;

You can implement on a component this way

"use client";
import React, { ReactNode } from "react";
import styled from "styled-components";
import Header from "./Header";
import Footer from "./Footer";
import withClientValidation from "@/library/hoc/ClientComponent";

interface MainLayoutProps {
  children?: ReactNode;
}

const LayoutContainer = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 100vh;
`;

const MainContent = styled.main`
  flex: 1;
`;

const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
  return (
    <LayoutContainer>
      <Header />
      <MainContent>{children}</MainContent>
      <Footer />
    </LayoutContainer>
  );
};

export default withClientValidation(MainLayout);

This solved completley the problem for me, now when I need validate a component is client side just sent to the HOC and it seem to fix that, I'll keep testing

[junanobi]

I have issues like this :

createUnhandledError@
handleClientError@
error@
emitPendingHydrationWarnings@
completeWork@
runWithFiberInDEV@
completeUnitOfWork@
performUnitOfWork@
workLoopConcurrent@
renderRootConcurrent@
performWorkOnRoot@
performWorkOnRootViaSchedulerTask@
performWorkUntilDeadline@

[SnakeEye-sudo]

This is a common hydration mismatch issue in Next.js. The problem occurs when the HTML rendered on the server doesn't match what renders on the client. Here are the solutions:

Root Causes:

1. Using getStaticProps with dynamic client-side data - The server renders with data, but client renders differently
2. Browser-only APIs being called during SSR - Like window, localStorage, Date.now() which give different values
3. Different data between server and client rendering

Solutions:

1. Use useEffect for client-only data

function MyComponent({ data }) {
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
    setMounted(true);
  }, []);
  
  if (!mounted) return null;
  // Render your component here
}

2. Suppress hydration warnings temporarily

function MyComponent() {
  return (
    <div suppressHydrationWarning>
      {typeof window !== 'undefined' ? clientValue : serverValue}
    </div>
  );
}

3. Use dynamic imports with ssr: false

const Component = dynamic(() => import('./Component'), { ssr: false });

4. Ensure consistent data between server and client

Make sure your getStaticProps returns the same data that your client-side code expects. Check for timezone differences, locale-specific formatting, or async operations.

Debug:

Enable verbose logging to see the HTML differences between server and client rendering.

Try these solutions and let me know which one works for your case!