스타일링

Next.js의 스타일링의 설정 방법은 어떻게 될까요?
Next의 스타일링은 React에서와 마찬가지로 거의 동일하게 하면 됩니다.

Next.js에서는 별도의 파일이나 또는 어떠한 컴포넌트 파일에서 별도로 CSS 파일을 그대로 import 하는 것을 제한합니다.

하지만 _app.tsx에서만 css 파일을 그대로 불러오는 것을 허용합니다.

그러면 어떻게 css 파일을 적용할까요??

그럴때 Next.js가 기본적으로 제공하는 CSS 모듈이라는 기능을 활용하면 됩니다.
css파일을 만들 때
이름을 index.css 라고 쓰지 말고 index.module.css로 바꿔주면 됩니다.

.h1 {
  color: red;
}

css파일을 설정해줬다면

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

불러온후 className에 적용시켜 주면 됩니다.

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

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

그러면 className이 다른 파일과 겹치지 않게 유니크한 값으로 설정이 됩니다.
개발자 도구를 통해 살펴보면 class가 index_h1__JHo3j 처럼 자동으로 설정된것을 확인할 수 있습니다.

다른 것 또한 h2로 파란색 글씨를 만들고 싶다면
index.module.css파일에서

.h1 {
  color: red;
}

.h2 {
  color: blue;
}

추가 후

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

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

className으로 스타일을 설정해주면

잘 적용이 됩니다!

이런 CSS 모듈을 활용해야 되는 이유는
Next.js에서는 페이지별로 CSS의 클래스네임이 겹치는 문제를 원천 차단하기 위해서 _app.tsx컴포넌트를 제외하고는 글로벌 CSS 파일을 그대로 import 하는 것을 방지하고 반드시 CSS 모듈이라는 문법을 활용해야 합니다.