Next13-styled-component-적용하기

2023-05-16

이 포스팅에서는 블로그를 개발하면서 적용했던 styled-component 적용법을 정리해보고자 한다

이미 다른 사람들이 잘 정리한게 많아 간단하게만 적어본다

compiler 옵션에 styledComponent를 true로 주자

이 옵션에서는 styledComponent 외에도 다양한 옵션을 더 줄수 있는데

공식문서에서 확인해보자

/lib/registry.tsx

중간에 @ts-ignore를 잊지말자 styled-component 최신버전과 .d.ts 파일의 버전이 맞지 않아

에러가 생긴다

root layout에 적용한다

GlobalStyles 도 위와 같이 같이 적용해주면 된다

StyledComponentsRegistry 가 없어도 next.config.js 설정 만으로 적용이 되는거 같은데

공식문서에는 registry 를 적용하는 과정이 필요하다 써있다