[Next.js] CSS 모듈

Next.js에서 CSS를 추가하는 방법은 다양하게 있다. 

 

1. style 속성 사용 

import Link from "next/link";
import { useRouter } from "next/router";

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

export default NavBar;

태그에 존재하는 style 속성을 사용하면 Next.js에서도 똑같이 style을 줄 수 있다. 

하지만 이 방법은 재사용에 불편함이 있고, 개인적으로 코드 가독성이 떨어진다고 생각한다. 

 

대신 사용할 수 있는 기능 중 하나가 .module.css 패턴이다. 

 

2. .module.css 패턴

먼저 css 파일을 파일명.module.css로 만들어준다. 

 

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

const NavBar = () => {
  const router = useRouter();

  console.log(router);

  return (
    <nav>
      <Link href="/">
        <a className={router.pathname === "/" ? style.active : ""}>Home</a>
      </Link>
      <Link href="/about">
        <a className={router.pathname === "/about" ? style.active : ""}>
          About
        </a>
      </Link>
    </nav>
  );
};

export default NavBar;

그리고 style 파일로 불러와서 style 속성에 넣어준다. 

 

특징으로는 className에 "active"를 넣는것이 아닌 style.active를 넣어준다. 

이렇게 추가하면 Next.js에서 뒤에 난수값을 넣어줘서 클래스명이 충돌되는 현상을 방지해준다. 

그렇기 때문에 다른 컴포넌트에서 똑같이 active라는 클래스명을 사용해도 서로 충돌이 발생할 일이 없어진다. 

 

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

const NavBar = () => {
  // ...

  return (
    <nav>
      <Link href="/">
        <a                                                      -- 1
          className={`${style.link} ${
            router.pathname === "/" ? style.active : ""
          }`}
        >
          Home
        </a>
      </Link>
      <Link href="/about">
        <a                                                      -- 2
          className={[
            style.link,
            router.pathname === "/about" ? style.active : "",
          ].join(" ")}
        >
          About
        </a>
      </Link>
    </nav>
  );
};

export default NavBar;

만약 스타일을 2개 이상 주고 싶은 경우 1과 2의 방식으로 사용할 수 있다. 

1. 텍스트 형식으로 각각의 스타일을 넣어주는 방식
2. 배열에 넣어 마지막에 join(" ")을 사용해서 넣어주는 방식

둘 중 어떤 방식을 사용해도 문제없다. 

 

그런데, 여기서 하나만 사용할 때는 충돌도 일어나지 않고, 자동으로 뒤에 난수값을 넣어주는 것은 좋다고 생각되나, 

2개 이상의 속성을 넣어주는 방식이 깔끔하다고 생각되지는 않는다.