CSS Modules

components파일에 작명.module.css 파일을 만들고, css를 작성한 다음

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

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 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>
}

이렇게 import styles from 경로 로 import를 해주면 className에 오브젝트에서 프로퍼티 형식으로 적어주면 된다.

만약, 두 가지 클래스를 넣으려면,

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

이런 식으로, `` 백틱을 이용해서 ${}로 하나씩 넣어야한다.