I'm currently in the process of creating an application using Next.js 14, TypeScript, Mongoose, and MongoDB.
In this app, I retrieved user data from my database and displayed them on cards along with relevant information like tags represented by badges.
To make these cards and badges clickable, I utilized the Link component.
Here is a snippet of the pertinent code:
- "components\cards\UserCard.tsx":
/* The code for UserCard component goes here... */- "components\shared\RenderTag.tsx":
/* The RenderTag component code can be found here... */Despite my efforts, I encountered the following error:
Error: Hydration failed due to a mismatch between the server-rendered UI and the initial state. For more details, refer to: https://nextjs.org/docs/messages/react-hydration-error
The expected matching <article> element was not found in the server-side HTML.
I attempted various solutions such as replacing the article with a div or using the suppressHydrationWarning property, but none resolved the issue.
As an alternative, I switched to utilizing useRouter instead of Link for navigation.
Here is the revised code:
- "components\shared\RenderTag.tsx":
/* The updated RenderTag component code resides here... */Although the hydration error has been eliminated, a new warning surfaced in the terminal:
Warning: Only plain objects are supported in Client Components when passed from Server Components. Objects with toJSON methods are not compatible. Convert complex objects to simple values before passing them as props.
<... _id={{buffer: ...}} name="next.js">
Why is this warning occurring, particularly the segment
<... _id={{buffer: ...}} name="next.js">This issue appears to stem from the "tags" collection in my database which contains entries like:
{"_id":{"$oid":"66a476d397749b79a8140e72"},"__v":{"$numberInt":"0"},"createdOn":{"$date":{"$numberLong":"1722054355742"}},"followers":[],"name":"next.js","questions":[]}
{"_id":{"$oid":"66a5164197749b79a8a3258b"},"__v":{"$numberInt":"0"},"createdOn":{"$date":{"$numberLong":"1722095169919"}},"followers":[],"name":"React","questions":[]}
However, why does this error surface only when using useRouter?