[Next.js] Styled-Components in Next

1. styled-components 설치

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

 

2. babel 설치

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

 

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

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

 

4. .eslintrc.json 설정

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