Next.js에서 styled-components 사용면서 새로고침하면 스타일이 사라지는 에러

next.js 12 버젼이후로는
next.config.js 파일에

const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};

compiler를 위와 같이 추가해 주면 문제가 해결됩니다.
그렇지 않다면 다음을 따라하시면 됩니다.

step1

npm install --save-dev babel-plugin-styled-components

step2

루트 디렉토리에 .babelrc 파일 만들기

step3

 {
             "presets": ["next/babel"],
             "plugins": [["styled-components", { "ssr": true }]]
         }

만든 파일에 위의 내용 작성하기

step4

서버 다시 실행하기