Next.js로 개발중 리렌더링할 때 styled-component로 작성한 css가 적용되지 않은 채로 html 페이자가 렌더링 되는 현상을 겪었다. 이는 _document.tsx 파일을 커스텀하여 해결할 수 있었다. 첫번째로 styled-components의 서버측 className과 클라이언트측 className을 동일하게 유지되도록 하기 위해서 next.config.js를 수정해야된다. next.js 12.1버전 이상부터는 babel-plugin-styled-components를 사용하지 않아도 되고, 다음과 같은 코드만 next.config.js에 추가해주면 된다. compiler: { styledComponents: true }, 두 번째로 _document.tsx 파일을 아래처럼 작성해 주면..
