Next.js 스타일링하기2 - 전역 스타일링/Global Styling

이전시간의 스타일링 기본은 잘 익혔어? https://ppsu.tistory.com/58

Next.js 스타일링 하기

이번엔 전체 페이지에 한꺼번에 스타일링을 넣는 방법을 알려줄께!

 

전역 스타일!

CSS Module이 컴포넌트 레벨에서는 유용하긴 한데, 어떤  CSS는 사이트의 모든 페이지에서 불러오고 싶을꺼야.

Next.js는 요것도 지원해 줘!

먼저 pages디렉토리 아래에 _app.js파일을 만들어줘!

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

이 App컴포넌트는 최상위 컴포넌트야. 그래서 모든 페이지에 걸쳐서 공통적인 내용을 담을 수있지. 예를 들면 페이지마다 들고 있고 싶은 state같은거?

한가지 주의할 건, 요 _app.js파일을 수정하면 서버를 재시작해야해!

오키도키?

그리고 이제 Global CSS파일 을 만들어볼까?

Global CSS는 _app.js에서만 import가 가능하니까. 엄한데 import하고 안된다고 하면 안돼!

대신 Global CSS파일의 위치랑 이름은 마음대로 정해도돼!

우리는 styles디렉토리에 global.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;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

 

_app.js파일에 import를 추가하면 아래처럼 될꺼야. 

import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

 

자 이제 마법을 지켜볼까?

 http://localhost:3000/posts/first-post 

안그래도 폰트가 좀 거슬렸는데 이제 어떤 페이지든 동일한 폰트로 보니까 깔끔해지고 좋은데?

음?

난 안된다고?

Ctrl-C눌러서 서버를 멈췄다가 재시작은 한거지? _app.js파일을 수정하면 서버 재시작 해줘야해. 잊으면 안돼! ^^

이제 스타일링에 자신감이 좀 생겼어? 이제 아예 홈페이지를 갈아엎어보자!

https://ppsu.tistory.com/61?category=853184

Next.js 스타일링하기 3