Next.js 12 - CSS Modules

Next.js 12

 

⚫ CSS Modules 사용법

---

- blabla.modules.css파일을 import하고 HTML에 className으로 styles.nav 이런 식으로 넣어주면 된다.

  파일명과 css파일에서 사용한 class이 같이 className으로 들어가고 추가적으로 무작위 텍스트가 추가되어 class 충돌을 방지한다.

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>
      <Link 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에 여러 개의 class를 넣고 싶다면?

---

1. string interpolation을 사용해서 넣어준다.

2. 배열로 만들어서 class들을 넣어준 뒤, join(" ")으로 띄어쓰기로 구분하여 string으로 합쳐준다.