Next.js 탐구하기

오늘은 최근에 공부한 Next.js에 대해서 간단히 공부한 내용을 작성해볼려고 합니다.
처음 공부한 내용이여서 맞지 않는 부분이 있을 수도 있습니다.

css 적용하기

Next.js에서 css를 적용하는 것은 크게 2가지가 있습니다.
1. module css

module.css는 각 모듈별로 css를 스타일링하는것입니다. 
components에 각 css 파일을 import 해줘야하고 styles.example처럼 객체의 프로퍼티로 사용합니다. 
여러 class를 사용하려면 아래와 같이 사용해야합니다. 

import styles from './example.module.css

`${styles.a} ${styles.b}`
[styles.a, styles.b].join(" ")

하지만 단점으로는 글로벌 css를 적용하기 어렵고 각 모듈마다 css파일을 다 생성해서 import 해줘야하는 번거로움이 있습니다.

2. styled jsx
   styled js는 js 파일 안에

<style jsx></style>

태그를 생성하여 태그 안에 css를 작성하는 방식입니다. 여러 css 파일을 생성하지 않아도 되고
한 페이지 안에서만 작동하기 때문에 여러 페이지에서 같은 이름의 선택자를 사용하여도 문제가 생기지 않습니다. jsx 뒤에 global을 props로 주게 되면 한페이지 내에서 글씨체 같은 것을 global하게 사용할 수 있습니다.

전체 app에 global css를 적용할려면 _app.js에서 2번째 방법을 사용하거나 styles/globals.css를 import하면 된다.

_app.js

여러 페이지에서 공통적으로 사용되는 components들이 있다. (navbar, footer...)
하지만 이러한 components가 계속 한 페이지마다 import되고 작성하게 되면 똑같은게 여러번 반복된다.
이러한 귀찮음을 해결할 수 있는 방법이 _app.js이다.

_app.js는 일종의 청사진이다.

사용하기 위해서는 파일이름을 무조건 app.js로 사용해야한다.
nextjs가 먼저 _app.js를 실행하기 때문에 다음과 같이 작성하면 Component에 pages에 있는 components들이 전달되어 실행되게 된다.

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}


export default MyApp

...ing