Next.js | 기본기능 | Built-In CSS Support

Adding a Global Stylesheet

만약 application에 stylesheet을 추가하려면 pages/_app.js에 CSS 파일을 import해라.

예를들어

 

/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한다.

 

pages/_app.js

import '../styles.css'

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

 

 

 

Adding Component-Level CSS

Next.js는 [name].module.css 파일명 형식의 CSS Modules도 지원한다.

 

예를 들어 Button 컴포넌트를 생각해보자.

 

먼저 components/Button.module.css 를 생성한다.

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

 

그다음 components/Button.js를 생성하고 CSS 파일을 import한다.

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

export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

 

오직 .module.css라는 확장명을 사용한 파일에만 적용된다. 이런 css 파일들은 application이 빨리 실행되도록 해주는데 app이  paint되기에 최소한 양의 CSS만 로드되도록 해주기 때문이다.

 

 

Sass Support

Next.js는 .scss나 .sass 모두 import할 수 있게 해준다. 그러기 위해선 먼저 설치해야한다.

$ npm install sass

 

Note: Sass는 2개의 syntax를 지원한다. .scss는 SCSS 문법을 사용하길 요구한다. 반면에 .sass는 들여쓰는 SASS문법을 사용하길 요구한다.만약 특별히 사용에 대한 기준이 없다면, .scss를 사용해라. 이건 CSS의 상위집합개념이고 SASS에서 사용하는 어떤 들여쓰기 문법도 요구하지 않는다.

 

CSS in JS

CSS-in-JS 또한 사용가능하다. 아래 예가 있다.

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

export default HiThere