Next.js에서 스타일 분리하는 방법 총정리

Next.js 프로젝트를 진행하면서 스타일을 효과적으로 관리하는 것은 매우 중요합니다. 이 글에서는 Next.js에서 스타일을 분리하고 관리하는 다양한 방법들을 알아보겠습니다.

목차

1. 컴포넌트 내부에서 스타일 분리
2. 공통 스타일 파일로 분리
3. CSS Module 사용
4. 전역 스타일 관리

1. 컴포넌트 내부에서 스타일 분리

가장 간단한 방법은 컴포넌트 내부에서 스타일을 정의하는 것입니다.

// components/Button.tsx
export default function Button({ children }: { children: React.ReactNode }) {
  const style = {
    button: {
      backgroundColor: '#0070f3',
      color: '#ffffff',
      padding: '10px 20px',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer'
    },
    hover: {
      backgroundColor: '#0051a2'
    }
  }

  return (
    <button 
      style={style.button}
      onMouseOver={(e) => {
        Object.assign(e.currentTarget.style, style.hover)
      }}
      onMouseOut={(e) => {
        Object.assign(e.currentTarget.style, style.button)
      }}
    >
      {children}
    </button>
  )
}

이 방법의 장점:

• 컴포넌트와 스타일이 한 파일에 있어 관리가 편함
• 간단한 컴포넌트에 적합
• TypeScript와 통합이 쉬움

2. 공통 스타일 파일로 분리

자주 사용되는 스타일은 별도의 파일로 분리하여 관리할 수 있습니다.

// styles/common.ts
export const style = {
  colors: {
    primary: '#0070f3',
    gray: '#666666',
    black: '#000000',
    white: '#ffffff',
  },

  layout: {
    width: '1200px',
    padding: '0 20px'
  },

  flex: {
    center: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    between: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    }
  }
}

사용 예시:

import { style } from '@/styles/common'

export default function Header() {
  return (
    <header style={{
      ...style.flex.between,
      maxWidth: style.layout.width,
      padding: style.layout.padding
    }}>
      <h1>Logo</h1>
      <nav>Menu</nav>
    </header>
  )
}

3. CSS Module 사용

컴포넌트별로 스타일을 모듈화하여 관리할 수 있습니다.

/* styles/Button.module.css */
.button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #0051a2;
}

import styles from '@/styles/Button.module.css'

export default function Button({ children }: { children: React.ReactNode }) {
  return (
    <button className={styles.button}>
      {children}
    </button>
  )
}

4. 전역 스타일 관리

전역적으로 적용되어야 하는 스타일은 globals.css에서 관리합니다.

/* app/globals.css */
:root {
  --max-width: 1200px;
  --primary-color: #0070f3;
  --text-color: #000000;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: -apple-system, system-ui, sans-serif;
}

스타일 관리 베스트 프랙티스

1. 일관성 유지

   • 프로젝트 전체에서 동일한 스타일링 방식 사용
   • 색상, 여백 등의 값을 일관되게 유지

2. 모듈화

   • 재사용 가능한 스타일은 별도로 분리
   • 컴포넌트별 스타일은 해당 컴포넌트에 가깝게 위치

3. 유지보수성

   • 명확한 네이밍 규칙 사용
   • 주석을 통한 스타일 설명 추가
   • 복잡한 스타일은 문서화

4. 성능 최적화

   • 불필요한 스타일 중복 제거
   • CSS-in-JS 사용 시 성능 영향 고려

결론

프로젝트의 규모와 요구사항에 따라 적절한 스타일링 방식을 선택하는 것이 중요합니다. 작은 프로젝트는 컴포넌트 내부 스타일이나 CSS Module로 충분할 수 있지만, 큰 프로젝트는 더 체계적인 스타일 관리 시스템이 필요할 수 있습니다. 중요한 것은 일관성을 유지하고 유지보수가 용이한 방식을 선택하는 것입니다.