[NextJS] CSS Modules

NextJS에서 CSS를 효과적으로 사용하는 방법

ex) NavBar.js 만든 곳에 NavBar.module.css 파일을 만들어 준다.

 

NavBar.module.css

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

NavBar.js

import Link from "next/link";
import styles from "./NavBar.module.css";

export default function NavBar() {

  return (
    <nav className={styles.nav}>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </nav>
  );
}

 

Router와 함께 사용 / 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>
  );
}

.link {
  text-decoration: none;
}

.active {
  color: tomato;
}