Styled-components with SSR
Unanswered
Salint posted this in #help-forum
SalintOP
After following the guide found here: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components.
I added the styled-components registery and in my page where it's a server component. I tried adding an element and I get this error:
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
I do not want my page to be a client component.
I added the styled-components registery and in my page where it's a server component. I tried adding an element and I get this error:
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
I do not want my page to be a client component.
16 Replies
Fire ant
Hello, same issue here, can someone help please ? thx 
@Salint your page doesn't need to be a client component.
Just create a wrapper which is a client component
https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Here is the doc link
Just create a wrapper which is a client component
https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Here is the doc link
I've literally put the same link in the post.
do you have configuration in the next.config?
@James4u do you have configuration in the next.config?
SalintOP
Yep. I've added it and still didn't work.
I've googled it and it looked like it just works in client components and most people have let go of styled components in favor of css modules
so I did the same.
Fire ant
Simple question, it's possible to use styled-components on SSR or not ? I have googled and ask to chatgpt, the response is yes, but i'm trying to find one single exemple of project that use styled-components on SSR but until now I can't find it ^^
i've found people saying they left styled-components to use css modules
so i did the same.
We are currently working on next-yak which compiles styled components into css modules: https://github.com/jantimon/next-yak/
It works with server components the same way like css modules do 🙂
It works with server components the same way like css modules do 🙂
@James4u amazing, is this your side project?
it's backed by https://www.galaxus.ch/en a 3 billion revenue ecommerce shop which is built with nextjs and thousands of styled-components 🙂
amazing