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

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

## 1. Next.js 란

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

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

* 각 route에 해당하는 파일들은 소문자로 pages 디렉토리에 넣어야 한다.
* CSS 모듈을 사용해야 한다.

등등...

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


## 2. CSS 모듈 추가하기

* CSS 파일 이름은 반드시 `module.css`으로 끝나야한다.&#x20;
* `style` 이라는 이름으로 import 한다.
* class는 `className`으로 사용한다.
* class="클래스이름" 대신 `className={styles.클래스이름}` 으로 사용한다.

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

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

참고 : [next.js 공식문서](https://nextjs.org/docs/basic-features/built-in-css-support)

## 3. className 여러 개 사용하기

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

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

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

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

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

Classnames 라이브러리의 자세한 사용법은 [README](https://github.com/JedWatson/classnames)를 참고하면 좋을듯.
