Next.js 15 / CSS Modules

개요

평소에는 Tailwind CSS를 사용하다가, 한번도 써보지 않았던 CSS Modules를 접하게 되어 정리해보려 한다.

 

Tailwind CSS는 Next.js를 설치할 때 터미널에서 선택하면 자동으로 설치되기도 하고,

Next.js 문서에서도 여러가지 CSS 적용 방법중에 볼드체로 권장되는 방법이기도 하다.

Getting Started: CSS | Next.js

(무엇보다 한 번 사용하게 되면서 다른건 보지도 않게 되었다...)

 

다만, Tailwind CSS를 사용하면서 길어진 className으로 컴포넌트 코드가 조금 지저분해 보인다는 단점이 있기는 하다.

따라서 CSS 문법에 익숙하다면, 그냥 CSS Modules를 사용하는 것도 나쁘지 않다고 생각한다.

 

CSS Module

CSS Module은 CSS를 로컬 범위로 한정하여 고유한 클래스 이름을 생성한다.

이를 통해 서로 다른 파일에서 같은 클래스 이름을 사용해도 충돌을 걱정하지 않아도 된다.

문법은 일반 CSS와 같고, 사용방법은 다음과 같다.

/* app/blog/blog.module.css */
.blog {
  padding: 24px;
}

// app/blog/page.tsx
import styles from './blog.module.css'
 
export default function Page() {
  return <main className={styles.blog}></main>
}

 

위의 결과를 브라우저의 개발자 도구에서 확인해보면 아래와 같은 결과를 얻는다.

지정한 클래스명인 'blog'가 붙고, 그 뒤에 '-module',

마지막으로 해시값이 붙는다.

따라서 다른 CSS Module에서 blog 클래스명을 사용하더라도 중복 걱정을 할 필요가 없는것이다.

 

Ordering and Merging

Next.js는 프로덕션 빌드 시 CSS를 자동으로 chunking 하여 최적화한다.

CSS의 적용 순서는 코드에서 해당 스타일을 import한 순서에 따라 결정된다.

 

여기서 헷갈리면 안된다!!

적용 순서가 import한 순서에 따라 결정된다는 말은,

만약 여러 CSS 파일을 import 했는데 한 클래스에 대해 겹치는 스타일링이 있다면,

결국 가장 마지막에 import한 CSS가 적용된다는 것이다.

 

헷갈린다면, 겹치는 CSS는 가장 마지막에 import 한거로 덮어씌워진다고 생각하면 된다.

"CSS를 적용한 태그랑 가까울수록 우선순위가 크다"라고 생각해도 좋다.

 

Recommendations

• CSS import는 가급적 한 곳의 파일(layout.js/ts)에서 관리
• 전역 스타일과 Tailwind CSS 스타일은 앱의 루트에서 import
• 스타일링은 대부분 Tailwind CSS 사용
  • 유틸리티 클래스로 미리 정해진 스타일이기 때문에 공통적인 패턴으로 사용 가능
• Tailwind CSS로 부족하면 CSS Modules 사용
• CSS Modules는 `<name>.module.css` 네이밍 권장
• 중복 스타일은 공용 컴포넌트로 추출
• ESLint의 `sort-imports` 등 import 순서를 강제로 바꾸는 도구는 비활성화
• CSS chunking 제어는 `next.config.js/ts`의 `cssChunking` 옵션 활용 가능

 

Developments vs. Production

• 개발 환경에서는 Fash Refresh로 CSS 업데이트가 즉시 반영
• 프로덕션 환경에서는 CSS가 여러 개의 minified되고 code-split된 `.css` 파일로 병합되어,
  라우트 별 최소 CSS만 로딩
• 프로덕션 빌드에서는 JS가 꺼져 있어도 CSS가 로드됨
  (위에서 말했듯이, 개발 모드는 Fash Refresh 때문에 JS 필요)
• CSS 순서는 개발과 프로덕션 환경에서 다를 수 있으므로 반드시 `next build`로 최종 CSS 적용 순서 확인