[Next.js] CSS Module

React에서 했던 것처럼 index.tsx에 관한 CSS 파일을 index.css로 만들어서 import './index.css'로 import 하면 다음과 같은 에러가 발생한다.

Global CSS cannot be imported from files other than your App.
(전역 CSS는 App 파일 이외의 파일에서는 import할 수 없습니다.)

 

이는 Next.js가 _app.tsx의 App 컴포넌트가 아닌 다른 파일에서 CSS 파일을 그대로 불러오는 걸 제한하고 있기 때문이다.
이렇게 제한하는 이유는 다른 페이지에 작성된 CSS 클래스명과 충돌을 일으킬 수 있기 때문이다.

 

예를 들어, 아래와 같은 CSS 파일이 있다고 하자.

index.css

.h1 {
  color: red;
}

test.css

.h1 {
  color: blue;
}

 

이 상태에서 index 페이지에 접속했다가 test 페이지로 이동할 경우, index.css 파일과 test.css 파일이 함께 로딩되어 클래스 이름이 충돌하게 된다. 브라우저는 .h1이라는 동일한 클래스명을 두 개의 스타일에서 읽게 되므로, 어떤 스타일이 적용될지 예측하기 어려운 상태가 된다.

Next.js는 이런 스타일 충돌을 방지하기 위해, 전역 CSS는 오직 App 컴포넌트에서만 import할 수 있도록 제한하고 있다.
* App 컴포넌트는 모든 페이지의 부모 컴포넌트이기 때문에, 예외적으로 globals.css를 import 하는 것을 허용한다.

 

 

그럼 어떻게 해야할까?

 

CSS Module 기능을 활용하면 된다. 클래스 이름들을 파일마다 유니크한 이름으로 자동 변환시켜주는 기능이다.

 

먼저, 파일명을 다음과 같이 바꿔준다.

index.css → index.module.css

 

그리고 다음과 같이 style 객체로 import해서 사용한다. CSS 파일 안에 있는 모든 클래스 이름들이 유니크한 값으로 변환되어 style 객체에 저장된다.

import style from "./index.module.css";

export default function Home() {
  return <h1 className={style.h1}>인덱스</h1>;
}

 

개발자 도구를 열어 확인해보면, 클래스명이 유니크한 값으로 변환된 것을 확인할 수 있다.