Next.js Style 사용법

노마드 코더의 니콜라스 Next.js 기초 강의를 수강하며 정리한 내용입니다.

Style 관련

CSS Modules

next.js에서 style을 이용할 때 모듈로서 사용한다.

css 파일 생성 시, filename.module.css 로 생성 하여 사용할 파일 내에 import 후 사용한다.

단 사용되는 파일마다 import를 해주어야 하고, 사용하는 태그마다 클래스명을 기억 해야 하는 등의 단점은 존재한다.

<예시>

/* NavBar.module.css */

.nav {
    background-color : tomato;
}

.a {
    color : white;
    text-decoration : none;
}

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

export default function NavBar (){
    return (
        <nav classname={styles.nav}>
            /* legacyBehavior???
             * next버전이 변경되면서 Link태그 내부에 
             * a태그를 사용 할 수 없게 되어 해당 속성을 추가하여 사용하거나
       * a태그를 제거 하여 사용 할 수 있다.
            */
            <Link href="/" legacyBehavior>
          <a classname={styles.a}>HOME</a>
      </Link> 
      <Link href="/about" legacyBehavior>
        <a classname={styles.a}>ABOUT</a>
      </Link>
        </nav>
    )
}

Style jsx

css module 사용 시, 다른 파일로 이동이 필요하고 많은 class명을 기억하기 힘들어 사용되는 style jsx는 쉽게 생각하면 js파일 내에 style태그를 직접 입히는 것으로 속성으로 jsx를 추가 시 next기능으로 모듈화가 이루어 진다.

즉, 내부에 선언 후 같은 페이지 내 다른 컴포넌트에서 호출 되지 않는다.

<예시>

/* NavBar.js */
import Link from "next/link"

export default function NavBar (){
    return (
        <nav>
            <Link href="/" legacyBehavior>
          <a classname="acitve">HOME</a>
      </Link> 
      <Link href="/about" legacyBehavior>
        <a>ABOUT</a>
      </Link>

            <style jsx>{`
                a {
                    color : blue;
                }
                .active {
                    color : tomato;
                }
            `}</style>
        </nav>
    )
}

style jsx를 이용하여 class를 확인해 보면 특이한 값이 들어간 것을 볼 수 있다.

 

Global style

style jsx를 이용하여 모듈화 한 것 까진 좋았다.

그럼 부모로 부터 내려오는 CSS는??? 매번 복사를 할 수는 없는 노릇이다.

그럴 땐 <style jsx global></style> 을 이용 할 수 있다.

물론 이것도 단점은 있다.

만약 index 페이지에서 global style을 사용하였다면 about 페이지에선 호출되지 않는다.

왜? index페이지와 about페이지는 별도로 호출되는 페이지이기 때문이다.

그럼 reset을 모든 페이지마다 호출 해야 하나? 그것 또한 No이다.

_app.js를 이용하여 전체적인 global 흐름을 제어할 수 있다.