Server component 와 CSS-in-JS

https://shiwoo.dev/posts/next-13-and-css-in-js

styled component를 적용시키니 나온 오류

 

Next js 15로 프로젝트를 시작하기 전, 익숙하고 동적 스타일 적용에도 편리한 Styled-components를 스타일 적용에 사용할 계획이었다. 하지만 막상 프로젝트를 시작하고 styled.ts 파일을 적용하니 저런 오류가 떴다. 일반적인 방식으로는 클라이언트 컴포넌트에서만 사용할 수 있고, 서버 컴포넌트에서는 CSS-in-JS를 쓸 수 없다고 한다. 

 

공식 문서에 보면 추가적인 설정(https://nextjs.org/docs/app/building-your-application/styling/css-in-js)을 통해 서버 컴포넌트에서도 styled-components를 사용할 수 있다고 하지만 복잡도가 증가하고 굳이굳이 이걸 쓸 필요가 없어서 next js에서 공식적으로 지원하는 방식인 module.css와 tailwind를 함께 사용하기로 했다.

 

그 외 styled-components의 장점이었던 동적 스타일 관리는, Classnames라는 class를 조건부로 설정할 때 유용한 라이브러리를 사용하여 복잡한 tailwind의 class들을 좀 더 깔끔하고 동적으로 관리할수 있게끔 해주었다.

자세한 설명: https://velog.io/@mjieun/NextJS-React-classnames%EB%A1%9C-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%95%A9%EC%84%B1%ED%95%98%EA%B8%B0

 

+)

모듈 방식으로 스타일을 적용 할 때는 보통 className에

import s from './Header.module.css'

export function Header() {
	return (
    	<header className={s.header}></header>
    )
}

이런식으로 적용하는데, 저런 방식으로 kebab-case를 적용하면 오류가 난다.

따라서 케밥 케이스를 적용하고 싶다면

import s from './Header.module.css'

export function Header() {
	return (
    	<header className={s['header-wrapper']}></header>
    )
}

이렇게 대괄호 안에 클래스명을 써주면 된다.

그 외 className 표기법: http://xn--birdmee-9t83a.tistory.com/53