[Next.js Learn] Assets, Metadata, and CSS(9) - Styling Tips

스타일링 팁(Styling Tips)

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

저희 앱에 변경 사항을 가할 필요 없이 다음 섹션들을 읽어주시면 됩니다 !

토글 클래스에 clsx 라이브러리 사용하기(Using clsx library to toggle classes)

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 구성을 커스터마이징하기(Customizing PostCSS Config)

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

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

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

npm install -D tailwindcss autoprefixer postcss

그리고 post.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 확장자를 통해 CSS 모듈 및 컴포넌트 수준의 Sass를 사용할 수도 있습니다.

Next.js의 내장된 Sass 지원을 사용하기 전에, sass를 설치해야 합니다.

npm install -D sass

이번 레슨은 여기까지입니다!

Next.js의 내장된 CSS 지원 및 CSS 모듈에 대해 더 알아보려면, CSS 문서를 확인해보세요.

---

출처: https://nextjs.org/learn/basics/assets-metadata-css/styling-tips