인프런 "한 입 크기로 잘라먹는 Next.js" 수강

스타일링

Next.js에서 스타일링하는 방법을 알아보자!

먼저 간단히 src > pages > index.tsx 안에서 인라인 스타일을 적용해볼 수 있다.

export default function Home() {
  return <h1 style={{ color: 'red' }}>인덱스</h1>;
}

하지만 인라인 방식은 코드가 지저분해지고, 재사용성이 떨어진다는 단점이 있다.
그래서 보통은 CSS 파일을 따로 만들어 관리한다.

---

❌ 잘못된 방식: 전역 CSS를 직접 import

import './index.css';

export default function Home() {
  return <h1 className="title">인덱스</h1>;
}

이렇게 작성하면 Build Error가 발생한다.

Next.js에서는 전역 CSS를 pages/_app.tsx에서만 가져올 수 있고, 일반 페이지 컴포넌트에서는 전역 CSS 파일을 바로 import하는 것을 금지하고 있기 때문!

⚠️ 이유

• 중복된 스타일링으로 인한 충돌 방지
• CSS 관리의 일관성 확보

---

✅ 권장 방식: CSS Module 사용하기

페이지 단위에서 개별 스타일을 적용하고 싶다면 CSS Module을 활용해야 한다.

• 파일명은 반드시 *.module.css 형태

import style from './index.module.css';

export default function Home() {
  return <h1 className={style.h1}>인덱스</h1>;
}

index.module.css

.h1 {
  color: red;
}