styled-components 를 nextjs 에서 사용하기 위해선 SSR 때문에 추가적인 세팅이 필요함
npm install --save styled-components
npm install --save-dev babel-plugin-styled-components
JavaScript
복사
// .babelrc 설정
{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{ "fileName": true, "displayName": true, "pure": true, "ssr": true }
]
]
}
// fileName: 코드가 포함된 파일명을 알려줌
// displayName : 클래스명에 해당 스타일 정보 추가
// pure : 사용하지 않은 속성 제거
// ssr: server side rendering
JavaScript
복사