With the recent NextJS 12 release, the styled-components is now supported without needing any plugin on top of NextJS.
But i cant seem to have it work with server side rendring.
To enable it, i installed the styled-components package and added the following in my config file.
module.exports = {
compiler: {
reactStrictMode: true,
styledComponents: true,
},
};
The styles are working on the client but the first render is missing the css styles. If i view the source page, can't see any css styles added there.
I have faced this exact issue but had to switch on another project. Maybe try this in your config
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
compiler: {
styledComponents: true,
},
}
module.exports = nextConfig
Source: https://styled-components.com/docs/advanced#with-swc
I recommend using NoSSR in nextjs.
So, you can use the following.
import dynamic from "next/dynamic";
...
const SidebarWithNoSSR = dynamic(() => import("./Sidebar"), { ssr: false });
...