CSS 스타일링

CSS 스타일링

Next.js는 애플리케이션을 스타일링하는 여러 방법을 제공해요. Tailwind CSS, CSS Modules, 전역 CSS, 외부 스타일시트, 그리고 Sass·CSS-in-JS 같은 고급 옵션까지요. 각 방식을 언제 쓰는지, CSS 순서가 어떻게 결정되는지, 개발·프로덕션에서 어떻게 다른지를 정리할게요.

출처: https://nextjs.org/docs/app/getting-started/css

Tailwind CSS

Tailwind CSS는 유틸리티 우선(utility-first) CSS 프레임워크예요. 낮은 수준의 유틸리티 클래스를 제공해 커스텀 디자인을 빠르게 만들 수 있어요.

postcss.config.mjs에 PostCSS 플러그인을 추가하고, 전역 CSS 파일에서 Tailwind를 import한 뒤 루트 레이아웃에서 그 CSS 파일을 import하면 돼요.

import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

이제 Tailwind의 유틸리티 클래스를 사용할 수 있어요.

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
    </main>
  )
}

CSS Modules

CSS Modules는 클래스 이름을 고유하게 생성해 CSS를 로컬 스코프로 만들어요. 그래서 같은 클래스 이름을 서로 다른 파일에서 써도 이름 충돌을 걱정할 필요가 없어요.

.module.css 확장자 파일을 만들고 app 디렉토리의 어떤 컴포넌트든 import하면 돼요.

/* 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>
}

전역 CSS(Global CSS)

전역 CSS를 사용하면 애플리케이션 전체에 스타일을 적용할 수 있어요. app/global.css 파일을 만들고 루트 레이아웃에서 import하면 모든 라우트에 적용돼요.

전역 스타일은 app 디렉토리 안의 어떤 레이아웃·페이지·컴포넌트에서든 import할 수 있어요. 하지만 Next.js는 React의 스타일시트 내장 지원을 Suspense와 통합해서 쓰기 때문에, 라우트를 이동해도 스타일시트를 제거하지 않아 충돌이 생길 수 있어요. 그래서 전역 스타일은 진짜 전역 CSS(Tailwind의 베이스 스타일 등)에 쓰고, 컴포넌트 스타일은 Tailwind로, 커스텀 스코프 CSS가 필요할 때만 CSS Modules를 쓰는 걸 권장해요.

외부 스타일시트

외부 패키지가 배포한 스타일시트는 app 디렉토리 어디서든(colocated 컴포넌트 포함) import할 수 있어요.

import 'bootstrap/dist/css/bootstrap.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

CSS 순서와 병합

Next.js는 프로덕션 빌드에서 스타일시트를 자동으로 청킹(merge)하며 최적화해요. CSS 순서는 코드에서 스타일을 import한 순서에 따라 정해져요. 예측 가능한 순서를 유지하려면:

  • CSS import는 JavaScript/TypeScript 엔트리 파일 하나에 모아두려고 해요.
  • 전역 스타일과 Tailwind 스타일시트는 애플리케이션 루트에서 import해요.
  • 대부분의 스타일링은 Tailwind CSS로 하고, Tailwind 유틸리티로 부족한 컴포넌트 전용 스타일에만 CSS Modules를 써요.
  • CSS Modules에는 <name>.module.css 같은 일관된 네이밍 규칙을 써요.
  • 공유 스타일은 공유 컴포넌트로 추출해 중복 import를 피해요.

개발 vs 프로덕션

  • 개발(next dev)에서는 Fast Refresh로 CSS 업데이트가 즉시 적용돼요.
  • 프로덕션(next build)에서는 모든 CSS 파일이 minified·code-split된 여러 .css 파일로 합쳐져, 라우트에 필요한 최소한의 CSS만 로드돼요.
  • 프로덕션에서는 JavaScript를 꺼도 CSS가 로드되지만, 개발에서는 Fast Refresh 때문에 JavaScript가 필수예요.
  • CSS 순서는 개발에서 다르게 동작할 수 있으니, 항상 next build로 최종 순서를 확인해야 해요.

더 알아보기