[NextJS] NextJS에서 Styled-components 사용하기

 

 

npm i styled-components
npm i @types/styled-components

 

styled-components 를 설치합니다.

 

npm install babel-plugin-styled-components
npm i babe-preset-next

 

babel plugin 을 설치하고 .babelrc 파일을 만들어 줍니다.

 

Next.js는 페이지 접속 시 SSR를 이용하고 이후 페이지 이동 시 CSR를 이용하여 페이지를 렌더링합니다.

이때 server와 client에서 생성하는 class 해시값이 달라 충돌로 인해 문제가 발생할수 있습니다.

babel 설정으로 충돌 문제를 해결할수 있습니다.

 

프로젝트 루트 폴더에 .babelrc 파일 생성

 

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

 

.eslintrc.json 설정

 

{
  "extends": ["next/babel", "next/core-web-vitals"]
}