Next.js, 핫로딩 후 styled-component 먹통 !

새로운 프로젝트를 시작하며

여러가지 상황을 고려해

next.js로 개발을 진행중입니다.

 

개발에서 가장 어려운건

환경 세팅이라고 그랬던가...

 

역시나 순탄하게 흘러가는 법이 없네요.

 

next.js에서 페이지 핫 로딩 후

styled-component가 먹통이 되는일이 발생하였네요.

다른 분들도 겪을듯 하여 해결 방법을 공유해봅니다.

 

// package.json

"babel": {
    "env": {
      "development": {
        "presets": ["next/babel"],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "production": {
        "presets": ["next/babel"],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": false
            }
          ]
        ]
      }
    }
  }