Problem with using styled components with server-side rendering in next JS

[hdck007]

https://styled-components.com/docs/advanced#nextjs I have referred to this but it won't work for some pages.

[Rahma-AlWadhahi]

Does it show error messages in these pages? If so, what is it?

[Ruchika30]

I have a lame question , but is the style file being imported correctly , I mean you can chk the path

[hdck007]

If you are asking about importing CSS files then I am not using CSS here. I am using styled components. If you meant something else please correct me.

[Ruchika30]

_Got it .

"But there is only one problem: Server-side rendering for styled-components is not yet active. You can see this by the fact that the CSS styles are not served in the response of the server, in the HTML document."_

Did u check this blog
https://javascript.plainenglish.io/server-side-rendering-styled-components-with-next-js-3197e527763b#:~:text=But%20there%20is%20only%20one,build%20version%20of%20our%20app.

[Ruchika30]

You can apply styled objects (css in js) , if you were using styled components for any other reason then thats a different story

[hdck007]

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components
I have already gone through the process mentioned in the blog but not through the blog instead I checked nextjs official examples instead because it is the most up to date solution but it doesn't seems to work for two level routes in my case eg host/admin/settings