Next.js 7. Built-in CSS Support

  Next.js를 사용하면 JavaScript 파일에서 CSS 파일을 가져올 수 있다. 이는 Next.js가 자바스크립트를 넘어서는 개념을 확장했기 때문에 가능하다.

 

• 전역 스타일시트 추가하기

  먼저 전역 스타일을 지정할 styles.css를 만든다.

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

  그리고 _app.js 파일을 만들고 다음과 같이 해당 css파일을 import 해준다.

import '../styles.css'

// 이 default export는 새로운 'pages/_app.js'파일에 필요하다.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

 

 

• Import styles from node_modules

  Next.js 9.5.4 버전부터 node_modules로부터 CSS를 import 하는 것이 앱 어디서든 허용되었다. bootstrap 또는 nprogress와 같은 글로벌 스타일시트의 경우 pages/_app.js에서 파일을 가져와야 한다. 예시는 아래와 같다.

// pages/_app.js

import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

  타사 컴포넌트에 필요한 CSS를 가져오려면 컴포넌트에서 수행할 수 있다.

// components/ExampleDialog.js

import { useState } from 'react';
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)
  
  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>x</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

 

 

• 컴포넌트 레벨에서 CSS 추가하기

  Next.js는 CSS 모듈이 [name].module.css 파일 명명 규칙을 사용하는 것을 지원한다. CSS 모듈은 고유한 클래스 이름을 자동으로 생성하여 CSS 범위를 로컬로 지정한다. 이를 통해 충돌에 대한 걱정 없이 다른 파일에서 동일한 CSS 클래스 이름을 사용할 수 있다.

  이 작동은 CSS 모듈을 컴포넌트 레벨 CSS를 포함하는 이상적인 방법으로 만들어준다. CSS 모듈 파일은 앱의 어느 곳에서나 가져올 수 있다. 예를 들어 components/ 폴더 안의 Button 컴포넌트를 재사용하는 것을 고려한다고 할 때, 먼저 components/Button.module.css를 아래와 컨텐츠와 같이 만든다.

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

  그리고 다음 위의 CSS 파일을 가져와서 사용하여 components/Button.js를 만든다.

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

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

  CSS 모듈은 선택적 특성이며, 오직 .module.css 확장자를 사용한 파일로만 가능하다. 일반 <link> 스타일시트와 전역 CSS 파일은 계속 지원된다.

  프로덕션에서 모든 CSS 모듈 파일은 자동으로 많은 축소와 코드 분할 그리고 .css 파일로 연결된다. 이러한 .css 파일은 앱의 핫 실행 경로를 나타내므로 앱이 페인트 할 수 있도록 최소한의 CSS가 로드되도록 해야 한다.