next에서 styled-component에 SSR 적용하는 방법

Styled-component와 Next

styled-component는 CSS-in-JS이다.

즉 JS를 통해서 CSS를 작성할 수 있게 도와주는 라이브러리이다.

 

한편 SSR은 자바스크립트가 실행되기 전, 서버에서 만들어준 html을 미리 렌더링하는 방식이고 Next.js는 React를 SSR로 렌더링 할 수 있게 만들어주는 프레임워크이다.

 

그럼 next에서 CSS-in-JS인 styled-component로 무언가를 작성했을때, 어떻게 SSR로 렌더링시킬 수 있을까??

 

.babelrc 설정

.babelrc 는 하위디렉토리나 파일에서 특정 플러그인이나 특정 규칙을 실행할 때 사용한다. (bebel 잘 설명해 놓은 블로그 참고)

예를 들어 특정 플러그인이 프로젝트내에서 트랜스파일링되지 않거나 특정 규칙으로 트랜스파일링 되기를 원할때 사용하면 된다.

1. 바벨 플러그인 설치

npm install babel-plugin-styled-components

 

2. root에 .babelrc를 만들고 다음과 같이 작성해주면 된다.

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true, // 태그 class명에 디렉토리, 컴포넌트명 추가
        "preprocess": false
      }
    ]
  ]
}

 

3. _document.tsx

그리고 당연히 pages폴더하위에 _document.tsx(jsx) 폴더도 만들어주어야 한다.