본문으로 바로가기

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

 

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

 

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

Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here.

nextjs.org

 

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

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

 


darren, dev blog
블로그 이미지 DarrenKwonDev 님의 블로그
VISITOR 오늘 / 전체