Con el reciente lanzamiento de NextJS 12, los componentes con estilo ahora son compatibles sin necesidad de ningún complemento además de NextJS.
Pero parece que no puedo hacer que funcione con la representación del lado del servidor.
Para habilitarlo, instalé el paquete de componentes con estilo y agregué lo siguiente en mi archivo de configuración.
module.exports = { compiler: { reactStrictMode: true, styledComponents: true, }, };Los estilos funcionan en el cliente, pero al primer renderizado le faltan los estilos css. Si veo la página de origen, no puedo ver ningún estilo css agregado allí.
Me he enfrentado a este problema exacto, pero tuve que cambiar a otro proyecto. Tal vez intente esto en su configuración
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, compiler: { styledComponents: true, }, } module.exports = nextConfigFuente: https://styled-components.com/docs/advanced#with-swc
Recomiendo usar NoSSR en nextjs.
Entonces, puedes usar lo siguiente.
import dynamic from "next/dynamic"; ... const SidebarWithNoSSR = dynamic(() => import("./Sidebar"), { ssr: false }); ...