Learn Next.js - Chapter 2. CSS Styling

next.js의 공식 tutorial을 공부하며 정리한 내용입니다.
tutorial: https://nextjs.org/learn/dashboard-app

Global Styles

global.css 등의 파일을 만들어 route 상의 모든 파일에 같은 CSS를 적용할 수 있다.
원하는 component에 각각 import해도 되지만, top-lovel component에 import하면 전체에 한번에 적용할 수 있다. (e.g., /app/layout.tsx)

Tailwind

미리 만들어진 utility class를 tsx 파일에서 사용하여 CSS 스타일링을 빠르게 해주는 CSS framework.
global.css로 전체에 css 적용이 되어 있어도, 각각의 component에 별도로 css를 적용할 수 있다.
nextjs에서 기본 지원하는 framework이기 때문에 create-next-app 할 때 자동으로 셋업되게 할 수 있다.

utility class란?

여러 스타일을 조합한 스타일을 미리 만들어둔 것. 예를 들어 h-0, border-b-black과 같이 className에 작성하면, 아래와 같이 미리 작성된 스타일로 치환해준다. 코드량이 줄고, 잘 만들어진 스타일을 쉽게 입힐 수 있다.

CSS Modules

CSS를 유니크한 class name을 가진 component로 자동으로 변환해 주는 것

clx

조건에 따라 다른 스타일을 적용해야 할 때 사용.
예제를 보면, status가 pending일 때와 paid일 때가 다른 스타일이 적용된다.

import clsx from 'clsx'; export default function InvoiceStatus({ status }: { status: string }) { return ( <span className={clsx( 'inline-flex items-center rounded-full px-2 py-1 text-sm', { 'bg-gray-100 text-gray-500': status === 'pending', 'bg-green-500 text-white': status === 'paid', }, )} > // ... )}