Next.js CSS와 UI Framework

CSS Module -> SASS로 && UI Framework (Ant Design or MUI)섞어서 사용. TailwindCSS && Headless UI(무제한 사용은 유료임)

CSS-in-JS

CSS-in-JS libraries such as styled-jsx, styled-components, and emotion

 

특징

1. Styled JSX- Next.js의 내장 기능으로 별도의 패키지 설치 필요없음

2. 자바스크립트 코드 안에 정의한 CSS는 실행 도중 또는 컴파일 시점에 CSS로 변환된다. 

 

단점 :

1. 코드 내에서 CSS에 대한 의존성이 점점 더 커지며, 애플리케이션 번들이 커지고 느려지게 될 가능성이 있다. -> 큰 사이트 적절하지 않음. 

2. 서버가 미리 CSS 규칙을 생성해 놓아도 클라이언트에서 리액트 하이드레이션이 끝나고 CSS 규칙을 다시 생성해야함. 이로 인해 실행 시점에 부하가 커지고 웹앱이 계속 느려지게 된다. 이 대신 CSS Module 사용하면 이러한 단점 보완 가능하다.

 

CSS Module

.module.css 파일에 css 작성, 클래스들은 컴포넌트 스코프를 가져서 다른 css 파일과 충돌하지 않는다. 

 

1. SCSS 와 antd의 결합

 

2. SCSS와 MUI의 결합