Next.js css in js(styled component) (2)

babel-plugin-styled-component 설치 >>

.babelrc 파일에 presets : ["next/babel"], plugins: [[ "styled-components",{ ssr : true }]] 설정

 

_documents 파일에 

styledsheet 다 불러와서 렌더트리 생성 이전에 스타일 코드 주입 하는 코드 추가(ex.https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)

 

이렇게 해주면

이전에 초기페이지 html + css(없음) dptj

js 로 만든 css 를 초기페이지에 적용하고 렌더링 한다~