Next.js 13 에는 아직 css-in-js 를 사용하긴 이른 것 같다

처음에는 css framewok로 mui(Material UI) 사용을 생각했으므로, mui에 맞게 emotion css 를 사용해보려 했으나...

듣도 보도 못한 에러가 나와서 당황하던 중... 공식 문서를 찾아보니

그렇다... emotion 과 mui는 아직 미지원 상태여서 에러가 났던거였다...

음, 그럼 스타일드 컴포넌트로 해야겠다! 나도 하던거 하면 편하니까!

안되는게 왜 이렇게 많아!

근데 안되네... ssr 로 만들어야 할 레이아웃의 서버 컴포넌트를 "use client"로 클라이언트 컴포넌트로 선언해서 csr 로 해야만 에러가 나지 않더라... 해당 페이지의 csr은 내가 원하는 것이 아니었다

한참을 방법을 찾던 중, next js 13 공식 문서에서 답을 찾았지만, 설정 방법 대로 하던 중, 아래와 같은 에러 발생...

아직 next js 13버전은 베타버전이라 사용자가 적어서 에러 해결을 위한 관련 자료가 너무 부족하였고,

아래 블로그글의 다른 선지자분의 시도에서도 아직 노답이라는 글을 보았으므로

https://velog.io/@qqww08/Next-13-%EC%97%90%EC%84%9C%EC%9D%98-CSS-in-JS-with.-styled-components

Next 13 에서의 CSS-in-JS with. styled-components

스타일드 컴포넌트 사용도 포기하기로 했다. 하아... 까다롭구나 next.js 13...

이럴거면 그냥 12로 만들걸 그랬다 근데 그래도 왠지 오기가 생겨서 13으로 계속 밀고가려 한다

css-in-js 는 next js 와 궁합이 좋지 않다고 들은적이 있는데, 그래서인지 호환이 늦는것 같다

굳이 css-in-js 를 고집하지는 않으려 한다. tailwind CSS 로 해보려 한다 🌊