🎨 Next.js App Router에서 CSS-in-JS 사용하기

Next.js App Router는 다양한 CSS-in-JS 라이브러리를 지원하여, 스타일을 컴포넌트 내부에서 선언하고 관리할 수 있는 장점을 제공합니다.
이 가이드에서는 Next.js에서 사용 가능한 주요 CSS-in-JS 라이브러리와 각각의 설정 방법을 소개합니다.

✅ 1. CSS-in-JS의 장점

모듈화: 컴포넌트 단위로 스타일을 관리하여 충돌 방지
동적 스타일: 상태 기반으로 스타일을 변경할 수 있음
자체 호스팅: Google Fonts 등을 직접 호스팅 가능
서버 사이드 렌더링(SSR): Next.js와 잘 맞아 SEO 성능 향상

✅ 2. Styled Components 사용하기

설치

npm install styled-components
npm install -D @types/styled-components

설정 파일 추가

// app/layout.tsx
'use client';
import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: '#0070f3',
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <ThemeProvider theme={theme}>{children}</ThemeProvider>
      </body>
    </html>
  );
}

사용법

// app/page.tsx
'use client';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 2rem;
  color: ${(props) => props.theme.colors.primary};
`;

export default function HomePage() {
  return <Title>Styled Components 적용 완료</Title>;
}

✅ 3. Emotion 사용하기

설치

npm install @emotion/react @emotion/styled
npm install -D @emotion/babel-plugin

설정 파일 (babel.config.js)

module.exports = {
  presets: ['next/babel'],
  plugins: ['@emotion/babel-plugin'],
};

사용법

// app/page.tsx
'use client';
import styled from '@emotion/styled';

const Title = styled.h1`
  font-size: 2rem;
  color: hotpink;
`;

export default function HomePage() {
  return <Title>Emotion으로 스타일링!</Title>;
}

✅ 4. Stitches 사용하기

설치

npm install @stitches/react

사용법

// app/page.tsx
'use client';
import { createStitches } from '@stitches/react';

const { styled } = createStitches({
  theme: {
    colors: {
      primary: 'blue',
    },
  },
});

const Title = styled('h1', {
  fontSize: '2rem',
  color: '$primary',
});

export default function HomePage() {
  return <Title>Stitches 스타일 적용</Title>;
}

✅ 5. Vanilla Extract 사용하기

설치

npm install @vanilla-extract/css
npm install -D @vanilla-extract/babel-plugin

설정 파일 (babel.config.js)

module.exports = {
  presets: ['next/babel'],
  plugins: ['@vanilla-extract/babel-plugin'],
};

사용법

// styles.css.ts
import { style } from '@vanilla-extract/css';

export const title = style({
  fontSize: '2rem',
  color: 'green',
});

// app/page.tsx
'use client';
import { title } from './styles.css';

export default function HomePage() {
  return <h1 className={title}>Vanilla Extract 스타일 적용</h1>;
}

✅ 6. Linaria 사용하기

설치

npm install @linaria/react @linaria/babel-preset

설정 파일 (babel.config.js)

module.exports = {
  presets: ['next/babel', '@linaria'],
};

사용법

// app/page.tsx
'use client';
import { css } from '@linaria/core';

const title = css`
  font-size: 2rem;
  color: darkorange;
`;

export default function HomePage() {
  return <h1 className={title}>Linaria 스타일 적용</h1>;
}

✅ 주요 라이브러리 비교

라이브러리 특징 SSR 지원 여부 주요 장점

Styled Components	가장 널리 사용, 스타일 모듈화	O	간단한 설정과 컴포넌트 기반 스타일
Emotion	성능 우수, 유연성 높은 스타일링	O	동적 스타일 적용에 유리
Stitches	빠른 성능, 경량	O	디자인 시스템 구축에 적합
Vanilla Extract	타입 안전 CSS	X	컴파일 타임 스타일 적용
Linaria	Zero-runtime CSS-in-JS	X	성능 최적화와 간단한 사용법

✅ 요약

Next.js App Router에서는 다양한 CSS-in-JS 라이브러리를 사용할 수 있으며, 프로젝트 요구사항에 따라 적합한 도구를 선택하는 것이 중요합니다.
SSR 지원 여부와 성능, 사용성을 고려하여 선택하는 것이 권장됩니다.

Next.js, CSS-in-JS, Styled Components, Emotion, Stitches, Vanilla Extract, Linaria, 스타일링, SSR 지원, 성능 최적화