서버사이드 렌더링 적용 후, css가 풀렸다가 다시 적용되는것 같아요.

와.. 드디어 되네요 너무 감사합니다!!

며칠 째 고생했는데 이렇게 되니까 너무 좋은데, 너무 허무하기도 하네요..ㅠㅠ

저는 여태껏 next config 설정과 babel 쪽만 보고 있었는데

이렇게 방법을 찾아내고 적용하는것이 실력이겠죠? 앞으로 더 열심히 하겠습니다!

아 그리고 혹시 몰라서 코드 남겨봅니다.

babel 대신 swc를 이용했습니다. (혹시 babel 설정으로 안되시는 분들을 위해서..)

1. npm install --save-dev @swc/plugin-styled-components @swc/core

2. root 폴더 안에 .swcrc 만들기

    

   // .swcrc

    

   { "jsc": { "experimental": { "plugins": [ [ "@swc/plugin-styled-components", { "displayName": true, "ssr": true } ] ] } } }

3. next.config 파일에 설정 추가

   
   swcMinify: true,
   compiler: { styledComponents: true, },
   ** 혹시 .babelrc를 삭제하지 않고 남겨두고 swc를 사용하려고 하면 이런 문구가 보입니다.
   'Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled

   '
   'compiler options in next.config.js will be ignored while using Babel https://nextjs.org/docs/messages/ignored-compiler-options'

   
   바벨 셀정파일을 남겨두고 싶으시다면, 아래 설정도 next.config 파일에 추가해주시면 됩니다.
   experimental: { forceSwcTransforms: true, }

https://ant.design/docs/react/use-with-next#using-pages-router
이거 적용하셔야 할 것 같습니다.

공지사항에 등록해두겠습니다.

styled component용 ssr 설정 하셨나요?