Next.js 12 - Styled JSX, unknown property jsx found

Next.js 12

 

⚫ Styled-jsx

---

- Next.js 고유의 style 방법(격리된 범위 css에 대한 지원을 제공하기 위해 styled-jsx를 번들로 제공한다)

<style jsx>{``}</style>

 

 

25.03.02 기준 next.js "12.0.7" 버전으로 설치하여 진행하면 unknown property jsx found 에러가 발생한다.

 

⚫ Unknown property jsx found 해결 방법

---

해결법

1. npm install styled-jsx 로 styled-jsx를 명시적으로 설치해준다. (사실 이것만 해도 동작은 잘 될 것이다)

2. vscode extension인 styled-jsx, styled-jsx Language Server를 설치해준다. (css 자동완성 기능과 syntax highlighting 기능)

3. .eslintrc.json에 jsx를 ignore하는 rules 코드를 추가해준다. (굳이 안해도 css가 잘 적용되지만, error 표시가 보기 싫으면 작성)

 "rules": {
    "react/no-unknown-property": [
      2,
      {
        "ignore": ["jsx"]
      }
    ]
  }

 

⚫ Styled-jsx 장점

---

- Styled-jsx를 사용하면 className이 CSS Modules를 사용할 때보다 더 기이해진다.

  모듈들이 여전히 독립적이고, 파일 import도 필요없다.