Next js CSS Module

Next js 에서의 스타일링은

리엑트에서와 같이 jsx 태그에 style={{ color:"#000000" }} 과 같이 작성을 할 수 있지만,

module이라는 것을 사용할 수 있습니다.

 

CSS Module 파일 생성

다음과 같이 NavBar.module.css라는 파일을 생성해주고 css를 작성합니다.

 

이때 앞의 NavBar의 이름은 중요하지 않지만

뒤의 .module.css는 Next js에서 css 모듈을 만들때엔 고정 패턴입니다.

CSS Module 사용

그리고 css 모듈을 사용할 컴포넌트에서 다음과 같이 사용합니다.

먼저 생성한 module 파일을 styles로 import 해옵니다.

nav에 className에 .nav로 css를 작성했으니 styles.nav를 작성합니다.

import Link from "next/link";
// 작성한 module css를 styles로 import
import styles from "./NavBar.module.css";
export default function NavBar(){
	// className에 nav를 작성하지 않고 styles.nav로 접근합니다.
    return (
        <nav className={styles.nav}>
            <Link href="/">
                <a>Home</a>
            </Link>
            <Link href="/about">
                <a>About</a>
            </Link>
        </nav>
    )
}

CSS ClassName 생성

이러면 다음과 같이 브라우저에서 class 이름이 정해져집니다.

 

NavBar : 파일이름 .module.css 앞의 이름

nav : NavBar.module.css에서 선언하고 임포트해서 사용한 css 네임

OBiyO : 상위 directory들과의 관계가 있는 무작위 문자열

 

NavBar은 파일 이름의 .module.css 앞에 작성한 이름이 들어가고

nav는 선언한 클래스명이 들어가고

OBiyO는 무작위로 생성된 문자열이 들어갑니다.

아마 상위 directory와 현재 이름의 영향을 받아서 문자열이 생성되는듯 합니다.

상위 폴더인 components의 이름을 바꾸었더니 맨 뒤의 무작위 문자열의 패턴이 바뀌었습니다.

 

이렇게 Next js는 중첩되지 않는 css이름을 생성해줘 css 충돌 현상이 발생하지 않아

css를 모듈화해서 각 컴포넌트 별로 관리할 수 있도록 합니다.

 

동적 className

1. NavBar.module.css 파일에 다음과 같이 css를 추가해줍니다.

.active {
    color:tomato;
}

그리고 NavBar.js 컴포넌트 파일에 와서

다음과 같이 a태그에 작성해줍니다.

코드는 다음과 같습니다.

import Link from "next/link";
import { useRouter } from "next/router";
import styles from "./NavBar.module.css";
export default function NavBar(){
    const router = useRouter();
    return (
        <nav className={styles.nav}>
            <Link href="/">
                <a className={router.pathname === "/" ? styles.active : "" }>Home</a>
            </Link>
            <Link href="/about">
                <a className={router.pathname === "/about" ? styles.active : "" }>About</a>
            </Link>
        </nav>
    )
}

 

이렇게 하면 className을 router의 pathname이 맞는 url일때만 해당 active 클래스가 들어갑니다.

 

css 2개 이상 적용시

여러가지 방법이 있지만 다음과 같이 생성할 수 있습니다.

 

1. 배열에 join을 사용

배열로 css모듈을 조건부를 활용해 넣거나 그냥 넣어서 join()함수로 " " 한칸이 띄워져 있는 빈 공백을 가진

문자열로 합쳐서 만들어주는 방법이 있습니다.

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

 

2. 백틱을 이용한 단일 문자열

` ` 백틱과 ${}를 사용해서 css 모듈을 문자열로 합쳐줍니다.

이때에 각 변수들은 한칸 공백을 주어야합니다.

<Link href="/about">
    <a className={`
        ${styles.aRest}
        ${router.pathname === "/about" ? styles.active : ""} 
    `}>About</a>
</Link>

 

하지만 이전 두 방법은 css 모듈로 파일을 따로 빼야할뿐만아니라( 기존 바닐라 html, css, javascript 프로젝트를 많이 해봤던 경험이 있다면 그리 불편하진 않지만 ) 각 모듈별로 이름을 다 정해줘야하는 번거로움이 있어 다른 방법을 많이 사용한다고 합니다.