Next.js CSS (global, module)

global.css

Next.js 프로젝트에서 모든 페이지와 컴포넌트에 공통적으로 적용되는 스타일을 정의하는 파일. 일관된 디자인을 유지하는데 유용하다. app/layout.tsx에서 import하면 프로젝트 전체에 해당 스타일이 적용된다.

---

CSS 모듈

React의 스타일링 방법을 공부하면서 배웠는데, 자주 안 써서 까먹었기 때문에 여기서 한번 더 짚고 넘어간다.

CSS 모듈은 CSS를 컴포넌트 단위로 관리할 수 있게 해주는 기능이다. CSS 모듈을 사용하면 DOM 요소가 만들어지는 과정에서 랜덤한 클래스 이름이 자동으로 만들어져서, 다른 컴포넌트와 스타일이 충돌하지 않게 되는 장점이 있다. 사용하는 방법은 아래와 같다.

/* styles.module.css */

.hello {
  color: blue;
  font-size: 20px;
}

만약에 위 예시처럼 선택자를 지정해서 module.css를 만들었다면, 컴포넌트에서 사용할 때는 import ~ from으로 해당 스타일 파일을 불러와서 아래와 같이 작성해야 한다.

// MyComponent.jsx

import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <nav className={styles.hello}>
      Hello World!
    </nav>
  );
};

export default MyComponent;