티스토리 뷰

framework/NextJS

🎨 Next.js App Router에서 CSS 스타일링 완전 정복

octo54 2025. 4. 16. 13:33

🎨 Next.js App Router에서 CSS 스타일링 완전 정복

Next.js App Router 프로젝트에서 CSS를 관리하는 방식은 다양하며, 각 방식은 사용 목적에 따라 적절하게 선택할 수 있습니다. 이 글에서는 가장 대표적인 CSS 적용 방식부터, Tailwind, Sass, CSS-in-JS까지 App Router 기반에서 실제로 어떻게 적용하는지 코드 예제 중심으로 정리합니다.

🧩 CSS Modules

CSS Modules는 컴포넌트 단위로 스타일을 적용하고, 클래스 이름 충돌 없이 사용할 수 있는 방식입니다.

사용법

/* app/page.module.css */
.title {
  color: royalblue;
  font-size: 2rem;
}

// app/page.tsx
import styles from './page.module.css';

export default function Page() {
  return <h1 className={styles.title}>CSS Module 스타일</h1>;
}

🌐 글로벌 CSS

애플리케이션 전체에 공통적으로 적용할 스타일은 globals.css를 만들어 관리합니다.

사용법

/* app/globals.css */
body {
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  background-color: #f9fafb;
}

// app/layout.tsx
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

⚡ Tailwind CSS

Tailwind는 유틸리티 클래스 기반 스타일링으로 빠른 UI 구현에 적합합니다.

설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

설정

// tailwind.config.js
module.exports = {
  content: ['./app/**/*.{ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

사용

export default function Page() {
  return <h1 className="text-3xl font-bold text-blue-600">Tailwind 적용!</h1>;
}

💅 Sass (SCSS)

Sass는 CSS에 구조화와 변수/믹스인을 더해주는 스타일 전처리기입니다.

설치

npm install -D sass

사용법

/* app/styles.scss */
$primary-color: #1e40af;

h1 {
  color: $primary-color;
}

// app/layout.tsx
import './styles.scss';

🎨 CSS-in-JS (Styled Components)

컴포넌트와 스타일을 하나의 파일에 함께 관리할 수 있는 CSS-in-JS 방식도 널리 사용됩니다.

설치

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

사용법

'use client';
import styled from 'styled-components';

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

export default function Page() {
  return <Title>Styled Components 적용!</Title>;
}

📦 외부 CSS 라이브러리 사용 (예: Bootstrap)

외부 CSS 프레임워크를 사용하려면 layout.tsx 또는 _app.tsx에서 직접 import 합니다.

npm install bootstrap

// app/layout.tsx
import 'bootstrap/dist/css/bootstrap.min.css';

export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

✅ 정리

방식 특징 추천 상황

CSS Modules	컴포넌트 단위, 클래스 이름 충돌 방지	컴포넌트별 스타일 관리
글로벌 CSS	전역 스타일 설정	리셋, 폰트, 배경
Tailwind CSS	빠른 유틸리티 스타일링	UI 속도 중심 개발
Sass (SCSS)	변수, 믹스인 등 고급 문법	복잡한 디자인 시스템
CSS-in-JS	컴포넌트와 스타일 통합	높은 모듈화, 상태 기반 스타일
외부 CSS	기존 프레임워크 활용	Bootstrap 등 즉시 UI 구축

Next.js, CSS Modules, 글로벌 CSS, Tailwind CSS, Sass, SCSS, CSS-in-JS, Styled Components, App Router, 웹 스타일링, 프론트엔드

'framework > NextJS' 카테고리의 다른 글

🔄 Next.js App Router에서 데이터 업데이트 완전 가이드 (0)	2025.04.18
📡 Next.js App Router 데이터 패칭 완벽 가이드 (0)	2025.04.17
🎨 Next.js App Router에서 이미지와 폰트 최적화 완벽 가이드 (1)	2025.04.15
🚀 Next.js App Router: 레이아웃과 페이지 구조 완벽 가이드 (0)	2025.04.14
🚀 Next.js App Router 기반 프로젝트 구조 완벽 이해 (0)	2025.04.13

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

TwentyTwentyOne

티스토리 뷰