Next.js Styling

1. CSS Modules

Next.js에서는 module.css 확장자로 CSS모듈을 기본적으로 지원한다.

CSS Modules는 유니크한 클래스네임(className)을 생성하여 css의 범위를 한정시켜 독립적으로 사용할 수 있다.

이는 같은 클래스네임을 여러 파일에서 사용해도 충돌이 나지 않게 해주는 장점이 있다.

• (사용예시)
  • Nav.tsx

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

export default function Nav() {
  const router = useRouter();
  return (
    <nav>
      <Link
        href="/"
        className={`${styles.link} ${
          router.pathname === "/" ? styles.active : ""
        }`}
      >
        Home
      </Link>
      <Link
        href="/detail"
        className={[
          styles.link,
          router.pathname === "/detail" ? styles.active : "",
        ].join(" ")}
      >
        Detail
      </Link>
    </nav>
  );
}

 

• Nav.module.css

.link {
  /* common style */
  text-decoration: none;
}
.active {
  color: tomato;
}

 

 

 

 

2. CSS-in-JS

• app 디렉토리의 Client Component에서 지원하는 라이브러리 목록
  • styled-jsx
    • style의 scope가 컴포넌트로 한정되어 있다.
    • (사용예시)

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

export default function Nav() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/" className={router.pathname === "/" ? "active" : ""}>
        Home
      </Link>
      <Link
        href="/detail"
        className={router.pathname === "/detail" ? "active" : ""}
      >
        Detail
      </Link>
      <style jsx>{`
        nav {
          background-color: lightskyblue;
        }
      `}</style>
    </nav>
  );
}

 

• styled-components

3. Tailwind CSS

4. Sass