[Next.js] Next.js와 styled-components

Next.js에서 styled-components를 같이 사용할 때 오류가 발생했다. 

찾아보니 styled-components를 사용했을 때의 className과 실제 적용되었을 때의 className이 달라서 발생하는

문제였다.

 

최초 실행 시에는 css가 제대로 적용이 되었는데, 페이지 이동 & 새로고침이 발생했을 때 위와 같은 오류가 나오면서 

css가 적용이 되지 않았다. 

 

찾아보니 next.js에서 초기 렌더링은 ssr로 적용되고, 이후 페이지 이동 등은 csr로 렌더링이 된다. 

초기 렌더링 시에는 ssr로 적용되기 때문에 문제가 없었지만 이후 csr로 적용되기 때문에 클래스 명이 맞지 않아서 

발생한 것 같다. 

 

해결 방법

구글에 검색 했을 때 기본적으로 해결하는 방법이 있었다. 

.babelrc에서 설정을 통해서 해결 또는 _app.js에 설정을 통해서 해결 

 

하지만 나는 이 두 방법 모두 사용해봤는데, 해결이 되지 않았다. 

그래서 이것이 개발 환경에서의 문제라고 생각해서 다른 방법을 찾아봤는데, 알아낸 키워드가 macro이다. 

 

내 환경에서는 babel-macro라는 것을 사용했는데, styled-components에서 macro 시 사용하는 것이 있었다. 

import styled , { createGlobalStyle } from 'styled-components/macro'

기본적으로 사용하는 방법은 같지만 styled-components/macro에서 가져오는 것이다. 

 

실제로 이렇게 사용하니 문제를 해결했다.