Next.JS - CSS Modules

css module을 이용하여 css를 적용해보자.

NavBar.js에 css를 적용하기 위해서 같은 이름에 module.css 파일을 만들어 주자.

.active {
color:tomato;
}

색상을 tomato로 바꿔주는 css를 active라는 클래스에 담았다.
css를 적용시키기 위해서는 js파일에서 import를 해줘야 한다.

import styles from "./Navbar.module.css";

( styles = Navbar.module.css )

이제 import한 styles를 적용시켜 보자.

// 12 ver
  <Link href="/" >
  	<a className={router.pathname === "/" ? styles.active : ""}>
      Home
      <a/>
	</Link>

// 13 ver
   <Link href="/" className={router.pathname === "/" ? styles.active : "" }>
	Home
	</Link>

12ver = a 태그안에 코드를 작성
13ver = Link 컴포넌트 안에 코드를 작성

클래스 여러개 적용하기

링크의 밑줄을 지워주는 css를 가진 link 클래스를 만들었다.
이 두개의 클래스를 같이 적용하는 법은 간단하다.

// 13ver
<Link href="/" className={`${router.pathname === "/" ? styles.active : ""} 
${styles.link} `} >
            Home
        </Link>

템플릿 리터럴 ${} 을 사용하여 나눠주기만 하면 된다.
(12와 13 모두 동일한 방식)

12ver은 a태그 안에서 적용해 주면된다.

배열안에 코드를 넣어주고 join으로 공백부분을 합쳐

css module의 장점

( Navbar의 active를 import를 한 상황 )
css module은 클래스 이름이 중복되지 않는다.

만약 다른 컴포넌트에서 같은 이름의 클래스를 사용한다 해도 페이지가 빌드될 때 클래스 이름을 무작위로 바꿔주기 때문에 충돌이 일어 나지 않는다.