[Next.js] CSS Module 사용하기

이번 글에서는 이전에 사용했던 NavBar를 꾸미는 작업을 진행하려 합니다. 

먼저 NavBars.js 가 있는 디렉터리에 같은 레벨로 NavBars.module.css 를 생성해줍니다. 이 module.css 확장자는 nextjs 에서 사용하는 css 파일 형식으로 변수처럼 사용할 수 있습니다. 예를 들어 NavBars.module.css 안에 아래와 같은 내용이 있다고 해보겠습니다.

.nav {
    display: flex;
    justify-content: space-between;
    background-color: tomato;
}

이렇게 적용이 된 경우 자바스크립트 파일에서는 이와 같이 사용할 수 있습니다. 

import styles from "./NavBars.module.css"

return <nav className={styles.nav}></nav>

 

그리고 react 문법과 마찬가지로 class를 헷갈리지 않도록 className 이라는 property를 사용하여 태그에 표시하게 합니다. 

그럼 아래에는 클래스를 2개 더 추가하여 다르게 보이도록 표시하는 방법에 대해 알아보겠습니다. 

 

a 태그 내에서 아래와 같은 클래스를 사용하고자 합니다.

.link {
    text-decoration: none;
}

.active {
    color: red;
}

link는 필수로 사용하고 싶고, active 는 해당 Link 태그가 클릭되거나 활성화인 경우 사용하고 싶다면 아래와 같이 작성해줍니다.

import Link from 'next/link';
import { useRouter } from 'next/router';
import styles from "./NavBars.module.css"

export default function NavBars() {
    const router = useRouter();
    console.log(router);

    return <nav className={styles.nav}>
        <Link style={{color: "red"}} href="/">
        <a
          className={`${styles.link} ${
            router.pathname === "/" ? styles.active : ""
          }`}
        >
          Home
        </a>
            </Link>
        <Link href="/about">
        <a className={[
            styles.link,
            router.pathname === "/about" ? styles.active : "",
          ].join(" ")}
        >
            About
        </a>
        </Link>
    </nav>;
}

이런 경우 className 에 들어가는 값은 변수로 작동되기 때문에 styles.link 는 필수로 사용하는 경우를 표시한 것입니다. 그리고 활성화된 내용을 체크하기 위해 2가지의 방법을 사용했는데, Home으로 넘어가는 경우 삼항연산자를 사용해 ``로 표현해주었고, About의 경우 Array.join() 을 활용해 클래스 명당 띄어쓰기를 해서 className={styles.link styles.active} 가 표시되도록 해주었습니다. 

 

Github : https://github.com/jyp90/nextjs-intro/commit/fba5a0cc0c3fcd988cbc5a5b12a03fcb9665a832

CSS class usage · jyp90/nextjs-intro@fba5a0c