next Built-In CSS Support(css 모듈, Sass Support, etc)

Next는 별도의 웹팩 세팅을 하지 않아도 자체적으로 sass, css 모듈, tailwind 등을 지원하고 간단한 라이브러리 설치를 통해 less, stylus 등을 사용할 수도 있습니다.

 

문서를 통해 관련 코드를 살필 수 있습니다.

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

 

css 모듈

 

Important: To use CSS Modules, the CSS file name must end with .module.css.

 

쉽게 말해 css 파일 내부에 모듈별로 css로 정의해놓고 빼다 쓰는 것입니다. 다음 예를 보면 쉽게 이해할 수 있습니다.

 

components/layout.module.css

.container {
    max-width: 36rem;
    padding: 0 1rem;
    margin: 3rem auto 6rem;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

components/layout.js

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

export default function Layout({ children }) {
  return <>
    <div className={styles.container}>
      {children}
      <header className={styles.header}>
    </div>
  </>
}

 

Sass

 

nextjs.org/docs/basic-features/built-in-css-support#sass-support

 

Next.js allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.

 

저는 개인적으로 styled-components를 사용하고 styled-components는 sass를 자동 지원하므로 별로 쓸 일은 없지만 sass를 사용하고자할 때 참곡하기 위해 링크를 첨부합니다.

 

 

그 밖에 tailwind 등 팁들은 다음 문서를 참고합시다.

 

nextjs.org/learn/basics/assets-metadata-css/styling-tips

Learn | Next.js