0

error: ‘Hydration failed because the initial UI does not match what was rendered on the server.’ when setting badgeContent to {state.cart.items.length} because the badge component className on the server doesn’t match what is rendered on the client

Answer:

hello there,
for Hydration fail error I update the cart link in the header menu on the client-side only using this code:

https://github.com/basir/next-tailwind-amazona/blob/main/components/Layout.js#L19

Also check these solutions:

https://github.com/vercel/next.js/discussions/35773

also this guide from next.js

https://nextjs.org/docs/messages/react-hydration-error

Basir Answered question October 13, 2022