Next.js Discord

Discord Forum

Basically my client side component isnt working

Answered
Banana posted this in #help-forum
Open in Discord
BananaOP
I have a client-side component inside my other component (which is serverside) and then the page, which is serverside, but for some reason the button isnt client side, its server side, how can i fix it?
Answered by Velvet ant
Next.js 13 introduces a new app/ directory structure. By default it uses Server Components. As NextUI components use React hooks, we added the use client; at build time, so you can import them directly in your React Server Components (RSC).

not sure to understand the "at build time" https://nextui.org/docs/frameworks/nextjs that's why I asked if component have "use client"
View full answer

27 Replies

BananaOP
If you want to see any code, then lmk
BananaOP
Thats extremely work now, it works when i build it but not on dev
BananaOP
bump
Velvet ant
Could you share some code or pseudo code ?
BananaOP
yeah sure
Velvet ant
wdym by "for some reason the button isnt client side" ? how do you check this ?
BananaOP
I console.log'd something and it was on the server, not the client
And same issue on my pages
Client side entirely just doesnt work on dev mode
and on build its still serverside but client side stuff works?? 😭
Velvet ant
so you mean that your button does not open the dropdown ? and animation does not work ?
But on production its still server side.. but client side stuff works
Velvet ant
I never use nextui but do nextui components use "use client" ? and it seems that you need to add a provider to the root layout
BananaOP
yeah your right it does need a provider
didnt realise that
I set all that up, its still serverside though
Velvet ant
Next.js 13 introduces a new app/ directory structure. By default it uses Server Components. As NextUI components use React hooks, we added the use client; at build time, so you can import them directly in your React Server Components (RSC).

not sure to understand the "at build time" https://nextui.org/docs/frameworks/nextjs that's why I asked if component have "use client"
Answer
BananaOP
thats probably where my issues are from then
Still having issues though :/
imma just try move away from nextui
Velvet ant
I'm trying a project with nextui just to check how it works
Velvet ant
I tried and it works on dev
"use client" is correctly set up when you install a component
BananaOP
hm, really weird then
Velvet ant
you can check in your node_modules if components have "use client" directive