Build-In CSS Support (내장 CSS 지원)

Next.js를 사용하면 JavaScript 파일에서 CSS 파일을 가져올 수 있습니다.

이것은 Next.js가 import 개념을 JavaScript 이상으로 확장하기 때문에 가능합니다.

참고 링크

Adding a Global Stylesheet

• Next.js는 (name).css 파일 명명 규칙을 사용하여 Global CSS 를 지원합니다.
• 애플리케이션에 global stylesheet를 추가하려면 오직 /_app.js 페이지 내에서 CSS 파일을 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} />}

Adding Component-Level CSS

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

• 스타일을 적용하고자 하는 태그의 className={styles.nav} 의 형식으로 작성해 주어야 한다.

• {styles.nav} 는 문자열이다.

• 실제 class 이름은 styled-components 처럼 class 이름 충돌이 안되게 랜덤하게 바뀐다.

• 여기서 조건에 따른 className이 바뀔때 복수개의 className이 할당이 된다면 className에 문자열로 선언되야 한다.

  → *<a className={${styles.nav} ${styles.about}}>index</a>*

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

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

Sass Support