[공식문서] NextJS - Assets, Metadata, and CSS #8

전역 스타일(Global Styles)

CSS Modules는 컴포넌트 레벨 스타일에 유용합니다. 하지만 모든 페이지에 대해 CSS를 로드하려면 Next.js에서도 지원하고 있습니다.

전역 CSS를 애플리케이션에 로드하려면 pages/_app.js라는 파일을 다음 내용으로 생성하세요:

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

 

_app.js의 기본 내보내기는 모든 페이지를 애플리케이션 내에서 래핑하는 최상위 React 컴포넌트입니다. 이 컴포넌트를 사용하여 페이지 간에 상태를 유지하거나 여기에서처럼 전역 스타일을 추가할 수 있습니다. _app.js 파일에 대해 자세히 알아보세요.

 

개발 서버 재시작

중요 : pages/_app.js를 추가한 경우 개발 서버를 재시작해야 합니다. 개발 서버를 중지하려면 Ctrl+c를 누르고 다음 명령을 실행하세요:

npm run dev

 

전역 CSS 추가

Next.js에서는 전역 CSS 파일을 pages/_app.js에서 가져와서 사용할 수 있습니다. 전역 CSS를 다른 곳에서 가져올 수는 없습니다.

 

전역 CSS를 pages/_app.js 외부에서 가져올 수 없는 이유는 전역 CSS가 페이지의 모든 요소에 영향을 주기 때문입니다.

 

예를 들어 홈페이지에서 /posts/first-post 페이지로 이동하는 경우 홈페이지의 전역 스타일이 의도치 않게 /posts/first-post에도 영향을 미칠 수 있습니다.

 

다음을 수행해보세요:

• 최상위 styles 디렉토리와 global.css 파일을 생성하세요.
• styles/global.css 내부에 다음 CSS를 추가하세요. 이 코드는 일부 스타일을 초기화하고 a 태그의 색상을 변경합니다.

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;
}

 

마지막으로, 이전에 생성한 pages/_app.js 파일 내에서 CSS 파일을 가져옵니다:

// `pages/_app.js`
import '../styles/global.css';

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

 

이제 http://localhost:3000/posts/first-post에 접속하면 스타일이 적용된 것을 확인 할 수 있습니다. _app.js에서 가져온 모든 스타일은 애플리케이션의 모든 페이지에 전역으로 적용됩니다.

 

작동하지 않으면 : pages/_app.js를 업데이트한 경우 개발 서버를 재시작하는 것을 잊지 마세요.