Next.js에서 스타일을 어떻게 적용하나요?

Next.js에서 CSS 파일이나 스타일링을 적용하려면 어떤 방식이 가장 효율적인가요? CSS 모듈이나 styled-components를 사용할 때의 차이점도 궁금합니다.

1개의 답변이 있어요!

  • Nextjs에서 스타일을 적용하는 방법은 여러 가지가 있어요

    CSS 파일을 직접 불러와서 사용하는 방법이 가장 기본이에요

    이 경우 pages/_appjs 파일에서 CSS 파일을 import하면 전체 페이지에서 적용할 수 있어요

    CSS 모듈을 사용하면 각 컴포넌트마다 고유한 클래스를 만들 수 있어서 스타일이 충돌하지 않아요

    예를 들어 stylesmodulecss 파일을 만들고 import할 때 styles를 객체처럼 사용할 수 있어요

    styled-components는 자바스크립트로 스타일을 작성할 수 있는 방법이에요

    이 방법은 컴포넌트와 스타일이 하나로 묶여서 관리하기 편해요

    각 방법마다 장단점이 있으니 본인이 편한 방식으로 선택하면 좋을 것 같아요.