Next.js 기본 사용법(8) - Built-In CSS

이번 포스트에서는 Next.js의 기본적인 CSS 적용 방법에 대해 알아본다.

 

1. Global Stylesheet

어플리케이션에 stylesheet를 추가하려면 pages/_app.js에 CSS 파일을 import 해야 한다.

이 스타일들은 어플리케이션 내에 있는 모든 페이지들과 컴포넌트들에 반영된다.

말 그대로 글로벌 스타일시트이기 때문에 충돌을 피하기 위해서 pages/_app.js 내에만 import 할 수 있다.

 

우선, css 파일을 하나 만들어 다음과 같이 작성한다.

/styles.css

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

이 후, pages/_app.js에서 import 한다.

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

 

2. Component-Level CSS

CSS 모듈은 고유한 클래스 이름을 생성하여 컴포넌트 레벨에 지정가능하다.

예를 들어, components/Button.module.css 를 아래와 같이 만든다.

.error {
  color: white;
  background-color: red;
}

그런 다음, components/Button.js 에 위의 CSS 파일을 import 한다.

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS 모듈은 선택적인 기능으로, .module.css 확장자를 사용하는 파일들에서만 사용가능하다.

이런 CSS 파일들은 어플리케이션이 최소한의 양으로 CSS가 로드되게끔 하여 빨리 실행되게 만든다.

 

3. CSS-in-JS

가장 기본적인 인라인 스타일이다.

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere

 

그 외에도 Sass, 혹은 템플릿 적용 등의 방법에 대해서는 공식문서를 참고한다.

https://nextjs.org/docs/basic-features/built-in-css-support

Basic Features: Built-in CSS Support | Next.js

 

---

 

다음 포스트에서는 환경변수에 대해 알아본다.