CSS 모듈화해서 원하는 곳에서 import 하여 사용하는 방식.

특징

• 문법은 기존의 CSS 문법을 사용한다.

사용 예시

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

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

const NavBar: NextPage = () => {
  const router = useRouter();
  return (
    <nav className={styles.nav}>
      ...
    </nav>
  );
};

...

여러 클래스 이름을 사용하려면?

백틱을 써서 띄워서 넣어주면된다. (생각해보면 당연)

<a
  className={`${styles.link} ${
    router.pathname === "/about" ? styles.active : ""
  }`}
>

• ${styles.link}
• ${router.pathname === "/about" ? styles.active : ""}
• 좀 불편하다.