.module.css

/* NavBar.module.css */

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

// NavBar.js

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

export default function NavBar() {
  const router = useRouter();

  return(
    // nav에 className을 {styles.nav}로 넣음
    <nav className={styles.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>
  )
}

• module.css 파일은 styles라는 이름으로 import 됨
• className={styles.nav} 형식으로 스타일 적용

조건문과 복수 className

/* NavBar.module.css */

.active {
  color: tomato;
}

.link {
  text-decoration: none;
}

// NavBar.js

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='/'>
        {/* 백틱을 이용한 복수 className */}
        <a className={`${styles.link} ${router.pathname === '/' ? styles.active : ''}`}>Home</a>
      </Link>
      <Link href='/about'>
        {/* 배열과 join()을 이용한 복수 className */}
        <a className={[styles.link, router.pathname === '/about' ? styles.active : ''].join(' ')}>About</a>
      </Link>
    </nav>
  )
}

• 중괄호 안에 백틱을 이용하여 ${}안에 원하는 className 각각 담기
• 배열 안에 className을 담고 join(' ')를 이용해 묶기