Next.js에서 css module사용

파일구조는 아래와 같이 components폴더안에 NavBar.js와 NavBar.module.css를 만들었다.

NavBar.module.css를 아래와 같이 작성

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

NavBar.js를 아래와 같이 작성

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

export default function NavBar() {
  const router = useRouter();
  console.log(router);
  return (
    <nav>
      <div>
        <Link href="/">
          <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
        </Link>
      </div>
      <div>
        <Link href="/about">
          <a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>About</a>
        </Link>
      </div>
    </nav>
  );
}

이제 NavBar.js에서 return 문을 조금씩만 건드려보자. 먼저 다음과 같이 작성해보자

//나머지는 위의 NavBar.js와 같음

return (
    <nav className="nav">

// NavBar.module.css는 다음과 같이 작성되어 있음
.nav {
  display: flex;
  justify-content: space-between;
  background: green;
}

어디에서도 background : green 을 찾을 수 없다.

그 이유는 우리는 Next.js가 이미 만들어놓은 module.css를 사용하고 있다.

Next.js는 프레임웤이고 개발자는 프레임웤의 규칙을 따라야 한다.

 

그러니 이해하려 하지 말고 그냥 다음과 같이 작성해보자.

(만약 그냥 평범한 css를 사용하고 싶다면 .module.css를 사용하지 않으면 됨)

 

//위의 NavBar.js에서 <nav> 태그 여는 부분만 아래 내용으로 수정

return (
    <nav className={styles.nav}>
    
// NavBar.module.css는 다음과 같이 작성되어 있음
.nav {
  display: flex;
  justify-content: space-between;
  background: green;
}

그렇게 하면 NavBar.module.css가 반영된 UI가 렌더링된다.

실제 HTML에는 다음과 같이 표기된다.

css module을 적용한 nav 태그

무작위 문자열로 class가 생성되기 때문에 어떤 충돌도 만들지 않는다!

 

때문에  Next.js에서 module.css를 사용하면 모든 컴포넌트에서 nav클래스를 사용할 수 있게 된다. 

왜냐고? 매번 class가 무작위 문자열로 생성되기 때문에 중복되지 않으니깐