[Next.js] 스타일링

 

Next.js에서 스타일링은 기본적으로 React에서 스타일링 하는 방식과 거의 유사하다.

 

2022.08.12 - [개발공부/🟦 React.js] - [React] React 스타일링

[React] React 스타일링

 

 

다만 React와 다르게 Next.js에서는 _app.tsx가 아닌 파일에서 import문을 통해 css를 그대로 불러오는 경우 에러가 발생한다.

(React에서는 겹치는 css가 있을 경우 cascading rule에 따라 덮어씌워진다.)

 

 

별도의 페이지 파일에서 css를 그대로 불러와 import한다면 다른 페이지의 css와 충돌을 일으킬 수 있기 때문이다.

 

만약 모든 페이지의 class name을 서로 겹치지 않게 작성하면 문제가 발생하지 않을 수 있겠지만 

현실적으로 프로젝트의 규모가 커지고 파일이 늘어나면 관리가 어렵기 때문에 문제가 발생할 가능성이 높아진다.

 

따라서, next.js에서는 그러한 문제를 차단하기 위해 _app 컴포넌트가 아닌 이상 css파일을 import할 수 없다.

_app 컴포넌트 파일에는 global css 역할을 할 css 파일을 import할 수 있다.

 

그렇다면 _app 컴포넌트가 아닌 다른 파일에서는 css를 어떻게 적용해야 할까?

 

 

 

✅ CSS Module

 

css파일을 모듈처럼 사용할 수 있도록 하는 Next.js의 기본 기능이다.

 

css module 파일에 작성한 classname들이 자동으로 유니크한 문자로 변환되어

다른 css파일의 classname과 중복되지 않도록 해준다.

 

css파일의 이름을 xxx.module.css로 설정해주고 해당 css를 적용할 컴포넌트 파일에서 import 한 뒤

원하는 요소의 className을 설정해주면 된다.

// index.tsx

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

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

// index.module.css

.h1 {
  color: skyblue;
}

 

 

 

✅ 그 외의 방법

이외에도 styled component 라이브러리를 사용하는 등의 방법으로 스타일링을 적용할 수 있다.

 

 

 

 

 

참고자료

🔗 [이정환] 한입 크기로 잘라먹는 Next.js(15+)