1. 개념 요약

Next.js는 글로벌 CSS와 CSS 모듈 방식을 모두 지원한다.

전역 스타일은 _app.tsx에서 한 번만 불러와야 하며, 나머지는 컴포넌트 단위 모듈화된 CSS로 관리하는 것이 권장된다.

2. 배경 지식

• React 기반 프로젝트에서 스타일 충돌 방지를 위해 보통 CSS Module을 사용
• Next.js도 동일한 방식을 따르며, 규칙적으로 전역 CSS와 모듈 CSS를 분리해야 함

3. 상세 설명

(1) Global CSS

• _app.tsx에서 단 한 번만 import 가능

  import '../styles/global.css'
  

• 프로젝트 전체에 적용되는 전역 스타일

• 일반 컴포넌트 파일에서 임의로 global css를 import하면 에러 발생

(2) CSS Module