Next.js Discord

Discord Forum

Next.js hydration error

Answered
Siamese posted this in #help-forum
Open in Discord
SiameseOP
I have a simple header component which displays user's wallet address and I am getting hydration error.
What's the reason?

9 Replies

Do you use any web3 libraries/hooks to get user wallet address in your component?
SiameseOP
@James4u Do you use any web3 libraries/hooks to get user wallet address in your component?
SiameseOP
yes. I am using rainbow kit and wagmi
okay so @Siamese web3 libraries/hooks use window object which doesn't exist on the server
as Next.js pre-render and hydrates to the client end you have different rendered payload on the server and client
that's why you get a hydration error
Answer
Try this one, lazy loading while skipping ssr
SiameseOP
Thank you @James4u