As I've mentioned before, all this styling stuff is pretty new to me. I've dabbled in making some basic things with MUI, but beyond that, its mostly just messing with the styles in the inspector until I get what I want.
This is a styled chip:
Wait...what?!?
1⨯ TypeError: createContext only works in Client Components. Add the "use client"
2directive at the top of the file to use it.
3Read more: https://nextjs.org/docs/messages/context-in-server-componentThe devil's work! Right, right...I forgot that we can't use things like useEffect or createContext in SSR
components...
Now, one option is to just make a client side component and annotate the TSX with 'use client' so that React will know
to generate this on the client side. That works fine...
It's even clickable because heck, it's part of your DOM. But...what about all the speed up that you're supposed to get from SSR? 😩
So this is really confusing (at least to me) because at this point (NextJS 15) all you have to do is add:
1compiler: {
2 styledComponents: true
3}to the next.config.js file. Next, you need to basically setup a way to collect the styles for components and
inject them into the <head> tag in the root layout. You still have to mark the file with the 'use client' directive, but it doesn't
mean that nothing will be rendered on the server side. I think ultimately we're still waiting on a real solution to
this. Until then, I guess I'll keep using the directive in my components that require it. 🤔
