[Next.js] Next.js 에서 styled components 사용하기

Next.JS 에서 styled components의 사용

Next.js 에서 React 에서 한것 처럼 styled component를 사용해서 작업을 하게되면 처음에는 잘 적용되는 것 처럼 보이지만, 새로고침을 하게되면 이내 css가 적용되지않고 브라우저가 에러를 발생시킨다 이는 styled-component는 hash 값으로 스타일 관리를 하는데 Next.js에서 클라이언트 사이드와 서버사이드에서 생성된 해시값이 달라서 Classname이 매칭되지 않는데에서 오는 오류이다

이 때문에 따로 몇가지 설정을 해주어야한다

---

해결방법😀

모듈 설치

styled components를 위한 babel 모듈을 설치하고, 적용해주어야한다 설치 하는 방법은 아래와 같다

//dev dependancies로 babel-plugin을 설치
npm install --save-dev babel-plugin-styled-components

yarn add -D babel-plugin-styled-components

바벨 설정 추가

설치한 바벨 모듈을 트랜스파일시에 적용하도록하는 설정을 해주어야한다. 프로젝트의 최상단 폴더에 .babelrc 라는 파일을 추가하고, 해당 파일내에 내용을 다음과같이 적고 저장해주면된다

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "fileName": true, "displayName": true, "pure": true }
    ]
  ]
}