Next.js 기초 <5. Next.js 15에서 스타일링 (CSS, Tailwind CSS, styled-components)>

넥스트 Next.js

5. Next.js 15에서 스타일링 (CSS, Tailwind CSS, styled-components) 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 사용할 수 있는 스타일링 방법

Next.js 15에서는 다양한 스타일링 옵션을 제공하며, 프로젝트의 목적과 성능 최적화를 고려하여 선택할 수 있다.

📌 Next.js 15 스타일링 방법 비교

스타일링 방식설명장점단점추천 사용 예시

CSS 모듈 (CSS Modules)	파일 단위 스타일링	✅ 네이밍 충돌 없음	❌ 글로벌 스타일 적용 어려움	컴포넌트 스타일
전역 CSS (Global CSS)	전체 프로젝트 스타일링	✅ 모든 페이지에서 공통 스타일 사용 가능	❌ 특정 컴포넌트에만 적용 어려움	공통 레이아웃
Tailwind CSS	유틸리티 기반 CSS 프레임워크	✅ 빠른 개발 속도	❌ 클래스명이 길어질 수 있음	빠른 UI 개발
styled-components	CSS-in-JS 방식	✅ 동적 스타일 적용 가능	❌ 성능 오버헤드 있음	컴포넌트 스타일
Vanilla Extract	타입 안전 CSS-in-JS	✅ 타입 안정성 제공	❌ 초기 설정이 필요	타입 안전한 스타일링

📌 Next.js 15에서는 "CSS Modules" + "Tailwind CSS" 또는 "styled-components" 조합이 가장 많이 사용됨!

---

2. Next.js 15에서 CSS 모듈 사용하기

✅ 1) CSS 모듈 설치 및 사용 (app/components/Button.module.css)

.button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.button:hover {
  background-color: #005bb5;
}

✅ 2) CSS 모듈을 사용하는 버튼 컴포넌트 (app/components/Button.tsx)

import styles from "./Button.module.css";

export default function Button() {
  return <button className={styles.button}>클릭하세요</button>;
}

📌 CSS 모듈을 사용하면 클래스명이 자동으로 고유하게 변환되어 충돌을 방지할 수 있음!

✅ 3) CSS 모듈을 적용한 페이지 (app/page.tsx)

import Button from "./components/Button";

export default function Home() {
  return (
    <main>
      <h1>🚀 Next.js 15 스타일링</h1>
      <Button />
    </main>
  );
}

📌 이제 버튼이 스타일이 적용된 상태로 렌더링됨!

---

✅ 여기까지 Next.js 15에서 CSS 모듈을 활용한 스타일링 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 Tailwind CSS를 어떻게 활용할까?"
✅ 2부에서 Next.js 15에서 Tailwind CSS를 설정하고 사용하는 방법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. Next.js 15에서 Tailwind CSS 설정하기

✅ 1) Tailwind CSS 설치

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

📌 Tailwind 설정 파일(tailwind.config.js)과 postcss.config.js가 자동 생성됨!

✅ 2) Tailwind 설정 (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

📌 Next.js 15의 app/ 폴더에 Tailwind CSS가 적용되도록 설정!

✅ 3) 글로벌 스타일 적용 (app/globals.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

📌 Tailwind의 기본 스타일을 Next.js 프로젝트에 적용!

✅ 4) Tailwind를 적용한 페이지 (app/page.tsx)

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-3xl font-bold text-blue-600">🚀 Next.js 15 + Tailwind CSS</h1>
      <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">
        클릭하세요
      </button>
    </main>
  );
}

📌 Tailwind를 적용하면 빠르게 반응형 UI를 만들 수 있음!

---

2. Next.js 15에서 styled-components 사용하기

✅ 1) styled-components 설치

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

📌 Next.js에서 TypeScript를 사용할 경우 @types/styled-components도 설치해야 함!

✅ 2) styled-components를 적용한 버튼 컴포넌트 (app/components/StyledButton.tsx)

import styled from "styled-components";

const Button = styled.button`
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  &:hover {
    background-color: #005bb5;
  }
`;

export default function StyledButton() {
  return <Button>클릭하세요</Button>;
}

📌 CSS-in-JS 방식으로 동적인 스타일 적용 가능!

✅ 3) styled-components를 적용한 페이지 (app/page.tsx)

import StyledButton from "./components/StyledButton";

export default function Home() {
  return (
    <main>
      <h1>🚀 Next.js 15 + styled-components</h1>
      <StyledButton />
    </main>
  );
}

📌 이제 styled-components를 활용하여 컴포넌트 기반 스타일링 가능!

---

✅ 여기까지 Next.js 15에서 Tailwind CSS와 styled-components를 활용한 스타일링 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 서버 컴포넌트(Server Components)는 어떻게 활용할까?"
✅ 다음 회차에서 Next.js 15의 서버 컴포넌트와 클라이언트 컴포넌트 차이를 배워봅시다!