Next.js style 적용

최근 리엑트를 사용하다가 Next.js를 알게되어서 공부를 시작하였는데, 리엑트보다 장점도 많기 때문에 리엑트를 사용하시는 분이라면 꼭 Next.js를 공부해 보세요!!

module.css 적용

다양한 방법이 있는데 첫 번째는 module을 적용하는 것 입니다.

css 파일을 만들 때 '[css파일 이름].module.css' 라고 만들어야 합니다.
그런 다음,

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
.header{
width: 100%;
height: 120px;
}

이런식으로 일반적인 css처럼 코드를 짜줍니다.

import styles from '../styles/Home.module.css';

이런식으로 사용할 js파일에 파일 위치에 맞게 import해줍니다.
그런 다음,

<div className={styles.header}></div>

위와 같이 jsx태그에 클래스네임을 {styles.[클래스이름]} 으로 지정해주면 css 적용!

Styles jsx

두 번째는 jsx코드 안에서 스타일 태그를 열어서 적용하는 방식입니다.

<>
    <div className={container}>
    </div>
    <style jsx>{`
      .container{
        width: 100%;
        height: 100%;
      }
    `}</style>
</>

위와 같이 jsx코드 안에서 스타일 태그를 열어서 css를 사용합니다.
중요한 점은 스타일 태그를 열 때 위와 같이 태그 안에 jsx를 적어줘야 하고,
또 태그를 열고 {}와 ``를 열어서 css코드를 작성해야 합니다.

Next.js react보다 stlye적용이 편리한 점

next.js에서는 react와 달리 파일마다 class 이름이 겹치는 걸 고려할 필요가 없다는 점이 매우 편리합니다.
그 이유는 위 설명과 같이 css를 적용하면 실제 코드에서는

이런식으로 각각 다른 클래스 이름이 적용되기 때문입니다.

오늘은 Next.js에서 style을 적용하는 방법과, Next.js에서의 style적용이 왜 React 보다 편리한지에 대해 알아보았습니다. 어렵지 않는 내용이니 모두 한 번 해보셨으면 좋겠습니다!!