[공식문서] NextJS - Assets, Metadata, and CSS #10

스타일링 팁

다음은 도움이 될 수 있는 스타일링 팁입니다.

다음 섹션을 차례로 읽어보세요. 앱에 변경 사항을 가할 필요는 없습니다!

 

클래스 토글을 위해 clsx 라이브러리 사용하기

clsx는 클래스 이름을 쉽게 토글할 수 있는 간단한 라이브러리입니다. npm install clsx 또는 yarn add clsx를 사용하여 설치할 수 있습니다.

더 자세한 내용은 해당 문서를 참조하시길 바랍니다만, 기본 사용법은 다음과 같습니다:

• 예를 들어, 'success' 또는 'error'일 수 있는 type을 받는 Alert 컴포넌트를 생성하려고 합니다.
• 'success'인 경우 텍스트 색상을 녹색으로, 'error'인 경우 텍스트 색상을 빨강으로 표시하고 싶습니다.

 

먼저 다음과 같이 CSS 모듈(alert.module.css)을 작성할 수 있습니다.

.success {
  color: green;
}
.error {
  color: red;
}

 

그리고 clsx를 다음과 같이 사용할 수 있습니다.

import styles from './alert.module.css';
import { clsx } from 'clsx';

export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

 

PostCSS 구성 사용자 정의

기본 설정으로 Next.js는 PostCSS를 사용하여 CSS를 컴파일합니다.

PostCSS 구성을 사용자 정의하려면 postcss.config.js라는 최상위 파일을 만들면 됩니다. 이렇게하면 Tailwind CSS와 같은 라이브러리를 사용할 때 유용합니다.

Tailwind CSS를 추가하는 단계는 다음과 같습니다. 먼저 패키지를 설치하세요.

npm install -D tailwindcss autoprefixer postcss

 

그런 다음 postcss.config.js 파일을 생성하세요.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

 

또한 tailwind.config.js에서 content 옵션을 지정하여 콘텐츠 소스를 구성하는 것을 권장합니다.

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // For the best performance and to avoid false positives,
    // be as specific as possible with your content configuration.
  ],
};

 

사용자 정의 PostCSS 구성에 대해 더 알아보려면 PostCSS 문서를 확인하세요.

Tailwind CSS를 쉽게 시작하려면 예제를 확인하세요.

 

Sass 사용하기

기본 설정으로 Next.js는 .scss 및 .sass 확장자 모두를 사용하여 Sass를 가져올 수 있습니다. .module.scss 또는 .module.sass 확장자를 사용하여 컴포넌트 수준의 Sass를 CSS 모듈로 사용할 수도 있습니다.

Next.js의 내장된 Sass 지원을 사용하려면 먼저 sass를 설치하세요.

npm install -D sass

 

이것으로 이번 레슨이 끝났습니다!

Next.js의 내장 CSS 지원과 CSS 모듈에 대해 더 자세히 알아보려면 CSS 문서를 확인하세요.