Next.js : Styling Tips

Next.js

Next.js : Styling Tips - 한글

개발자91 2022. 10. 10. 02:19

728x90

Assets, Metadata, and CSS ⑩

여기 스타일링 꿀팁이 있다.

이 장을 꼭 읽을 필요는 없다. 우리 앱을 바꿀 필요가 없다.

`classnames` 라이브러리를 사용해 클래스 고르기

Using `classnames` library to toggle classes

`classnames`는 클래스 이름을 쉽게 토글하게 해주는 라이브러리이다. `npm install classnames` 나 `yarn add classnames` 를 사용해 설치할 수 있다.

좀 더 자세한 내용은 문서를 확인해주길 바라지만, 기본 사용법은 아래와 같다.

성공 혹은 실패의 타입을 받는 `Alert` 컴포넌트를 생성한다고 가정하자.
그것이 만약 성공이라면, 글자 색상을 초록으로 하고, 에러이라면, 빨간색상으로 바꿀 것이다.

먼저 CSS 모듈인 alert.module.css 를 작성하자.

/* alert.module.css */
.success {color: green;}
.error {color: red;}

그리고 `classnames`는 이렇게 쓴다.

import styles from './alert.module.css';
import cn from 'classnames';

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

PostCSS Config 사용자화

박스에 어떤 설정도 없으면, 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}',
    // 최고 성능과 잘못된 긍정을 방지하기 위해서,
    // 컨텐츠 구성을 최대한 구체적으로 지정하세요.
  ],
};