[Next.js] CSS모듈과 복수의 class 사용하기

이 글에서는 next.js 프레임워크를 사용한 리액트 프로젝트에 CSS 모듈을 적용하는 방법과 classnames 라이브러리를 이용해 여러 개의 className을 적용하는 방법을 정리했다.

1. Next.js 란

Next.js는 리액트 어플리케이션의 서버사이드렌더링을 쉽게 구현할 수 있도록 도와주는 프레임워크다.

create-react-app 과 비슷하다고 생각할 수 있는데, next.js에서는 서버사이드렌더링과 코드스플릿팅 자동화를 위해 몇 가지 정형화된 규칙을 따라야한다.

• 각 route에 해당하는 파일들은 소문자로 pages 디렉토리에 넣어야 한다.

• CSS 모듈을 사용해야 한다.

등등...

이 글에서는 next.js 프레임워크를 사용한 리액트 프로젝트에 CSS 모듈을 적용하고, 여러개의 className을 사용하는 방법을 정리했다.

2. CSS 모듈 추가하기

• CSS 파일 이름은 반드시 module.css으로 끝나야한다.

• style 이라는 이름으로 import 한다.

• class는 className으로 사용한다.

• class="클래스이름" 대신 className={styles.클래스이름} 으로 사용한다.

import styles from './YearlyCalendar.module.css'

<div className={styles.header}><div>

참고 : next.js 공식문서

3. className 여러 개 사용하기

<div class="gantt__row gantt__row__months"></div>

일반 리액트 프로젝트에서 div 태그에 class를 여러 개 적용하고 싶으면 위 코드처럼 공백을 사용하면 되지만, next에서는 에러가 난다.

아래처럼 classnames 라이브러리를 사용하면 next.js에서도 클래스를 여러개 사용할 수 있다.

import styles from './YearlyCalendar.module.css'
import classNames from 'classnames';

<div className={classNames({[styles.gantt__row]: true, [styles.gantt__row__months]: true})}>

Classnames 라이브러리의 자세한 사용법은 README를 참고하면 좋을듯.