[Next.js] CSS module사용하기

💻 CSS 모듈 생성

🖤 CSS module 이란?

CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 준다. 일반 CSS파일과 동일한 방식으로 작성하지만 파일생성 시 이름은 ㅇㅇㅇ.module.css 이런식으로 짓는다.

• 특징
  1. 클래스 이름을 추가해줄 때, 클래스 이름을 텍스트로서 적지 않는다. 자바스크립트 오브젝트에서의 프로퍼티 형식으로 적는다.
  2. 페이지가 빌드될 때 nextJS가 클래스 이름을 무작위로 바꿔준다. 클래스 이름 충돌을 겪지 않아도 된다.
• 장점
  1. CSS Module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있다.
  2. CSS Module을 이용하면 컴포넌트 단위로 스타일을 적용할 때 유용하다.

🖤 NextJs에서 적용하기

• NavBar.module.css

<script>
	.active {
    color: rgb(120, 255, 120);
}
.link {
    text-decoration: none;
}
</script>

• NavBar.js

<script>
import Link from "next/link";
import styles from "./NavBar.module.css";
import { useRouter } from "next/router";

export default function NavBar() {
    const router = useRouter();
    return (
        // next에서 Link태그 자식으로 a태그 사용 X
        <nav>
            <Link href="/" className={`${styles.link} ${router.pathname === "/" ? styles.active : ""}`}>
                Home
            </Link>
            <Link href="/about" className={[styles.link, router.pathname === "/about" ? styles.active : ""].join(" ")}>
                about
            </Link>
        </nav>
    );
}
</script>

1) 백틱 이용

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

2) 배열형식으로 join(' ')

 <Link href="/about" className={[styles.link, router.pathname === "/about" ? styles.active : ""].join(" ")}>
                about
 </Link>

✔ 결과

참고문헌

CSS-module

노마드코더