[Next.js] Styles 사용 방법

Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다.

CSS-in-JS

가장 간단한 방법은 인라인 스타일입니다.

export default function Home() {
  return (
    <div>
      <div style={{ color: 'red' }}>Hello</div>
    </div>
  );
}

CSS Modules

Next.js는 [name].module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다.

Common.module.css 파일을 생성하고 스타일을 아래와 같이 작성합니다. 중요한 것은 .module.css 패턴을 사용하는 것입니다.

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

.text {
  color: blue;
}

생성된 module을 import 해서 사용합니다.

import styles from './Common.module.css';

export default function Home() {
  return (
    <div>
      <nav className={styles.nav}></nav>
      <h1>Hello</h1>
    </div>
  );
}

여러 개의 스타일을 적용할 수 있습니다.

import styles from './Common.module.css';

export default function Home() {
  return (
    <div>
      <nav className={`${styles.nav} ${styles.text}`}></nav>
      <h1>Hello</h1>
    </div>
  );
}

또는 join() 함수를 사용해 적용합니다.

import styles from './Common.module.css';

export default function Home() {
  return (
    <div>
      <nav className={[styles.nav, styles.text].join(' ')}></nav>
      <h1>Hello</h1>
    </div>
  );
}

Styled JSX

격리된 범위 CSS 에 대한 지원을 제공하기 위해 styled-jsx를 번들로 제공합니다.

styled-jsx를 사용하는 컴포넌트는 다음과 같습니다. style에 jsx prop 을 넣고 중괄호({})와 백틱(`)을 사용하여 작성합니다.

<style jsx>{`
  CSS 스타일..
`}</style>

export default function Home() {
  return (
    <div>
      <nav></nav>
      <h1>Hello</h1>
      <style jsx>{`
        nav {
          background-color: red;
        }
        h1 {
          color: blud;
        }
      `}</style>
    </div>
  );
}

Global Styles 설정하는 방법은 global Prop 을 추가하면 됩니다.

<style jsx global>{`
  body {
    background: black;
  }
`}</style>

VSCode 익스텐션

Styled JSX 사용 시 추천 VSCode 익스텐션입니다.

• styled-jsx : 하이라이팅, 코드 가독성에 도움이 됨
• styled-jsx Language Server : 자동완성

참고

• https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js
• https://github.com/vercel/styled-jsx