Styled components with NextJS 12 not working server side (missing css first render)

user_6875994 0
Viewed 143

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.

styled-components next.js reactjs javascript
2 Answers

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

user_188211270

I recommend using NoSSR in nextjs.

So, you can use the following.

import dynamic from "next/dynamic";
...
const SidebarWithNoSSR = dynamic(() => import("./Sidebar"), { ssr: false });
...
user_196022550
Related