Next.js Discord

Discord Forum

How do i use server and client components someone please help me.

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
Hey i am currently writing an part of my application where i have a client component that gets the public key from the useWallet and i then import that in a server componenet which then uses the publickey to make a fetch to see the solana balance but i am getting this error message.

40 Replies

Asian black bearOP
Please if someone could help i would really appreicate that
Pteromalid wasp
You can use client components in server component but you can't use helpers or hooks in server.
GetWallet runs on seever while the PublicKeyDisplay needs to run on client as it consumes use wallet hook
You can compose components
attend to the final part of the error
@Pteromalid wasp GetWallet runs on seever while the PublicKeyDisplay needs to run on client as it consumes use wallet hook
Asian black bearOP
I understand what your saying and i already know this by reading the error message but how do i fix it
whats the correct implementation?
Asian black bearOP
@Pteromalid wasp ill send you some new images of exactly what i am trying to do
ive spent like 5 hours now on this
maybe i am dumb
All i am trying to do is just export the publicKeyString so that i can use it in the other component to fetch the users portfolio information
When i do this in my navbar it works fine and prints the address
Pteromalid wasp
you can make GetWallet run on the client too for one but if you want to keep the API_KEY remain on the ckient you need some other way

maybe the solana lib you are using provides some solution
@Asian black bear When i do this in my navbar it works fine and prints the address
Pteromalid wasp
the navbar must be a client component then
Asian black bearOP
its not
also theres nothing wrong with the API-KEY
@Asian black bear its not
Pteromalid wasp
server comp can have clinet comp as children
Asian black bearOP
if i hard code the address into the component it works fine
so how do i do that
?
so why wont it work then
for my GetWallet component
i dont get it
Pteromalid wasp
on the navbar the PublicKeyDisplay runs on client side

YOU CANNOT USE A FUNCTION ANNOTATED WITH 'use client' ON COMPONENT THAT RUNS ON THE SERVER

its straightforward


Server comp can take Client component as children thats why the navbar comp runs fine
Asian black bearOP
Ok i understand what you are saying now so what is the solution of making this work then
i am a new dev man
sorry
i am not experienced like you
what modification do i have to make to the GetWallet to make it work?
@Pteromalid wasp
thank you for helping me
i appreciate it alot
Pteromalid wasp
there are 2 ways you can fix this
but note this first that I have not used the Morales/Solana lib you're using

here's what you can do
1. Make sure that the GetWallet helper runs on client as you need the wallet's public key

2. If you strictly need it to run on the server you can create a API endpoint and use that to get the balance of the user
Asian black bearOP
Ok i think i will have to do this option as it does have to be a server component i believe

If you strictly need it to run on the server you can create a API endpoint and use that to get the balance of the user
i will give it go and see thank you so much
Asian black bearOP
Still cant get it to work @Pteromalid wasp
is it possible i can go on call with you