NextJS에서 CSS 모듈

NextJS는 이미 CSS 모듈에 대한 내장 지원을 가지고 있습니다. 이것들은 별도의 CSS 파일로, 클래스 이름이 로컬 스코프 내에 있어서 서로 다른 컴포넌트들의 클래스 이름 간 충돌을 피할 수 있게 해줍니다.

어떻게 사용하는지 살펴봅시다. 다음과 같은 컴포넌트가 있다고 가정해 보겠습니다:

export default function Test() {
	return <p>
		text text text
	</p>;
}

이 컴포넌트를 위한 CSS 모듈을 만들어 봅시다. 같은 폴더에 확장자가 .module.css인 파일을 원하는 이름으로 생성합니다. 그 안에 다음과 같은 CSS 클래스를 작성해 보겠습니다:

.text {
	color: blue;
}

CSS 모듈을 컴포넌트 파일로 임포트합니다:

import styles from './test.module.css';

export default function Test() {
	return <p>
		text text text
	</p>;
}

이제 컴포넌트 내부의 단락에 CSS 클래스를 적용해 보겠습니다:

import styles from './test.module.css';

export default function Test() {
	return <p className={styles.text}>
		text text text
	</p>;
}

CSS 모듈을 사용하여 여러분의 컴포넌트들을 스타일링해 보세요.