[NextJs] Global CSS ( _app.js)

📌  _app.js 파일을 만들자.

무조건 저 이름이어야한다.

_app 은 서버로 요청이 들어왔을 떄 가장 먼저 실행되는 컴포넌트이다.

페이지에 적용할 공통 레이아웃의 역할을 한다.

 

import '../styles/globals.css'

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

export default MyApp

 

여기서 Component 속성값은 서버에 요청한 컴포넌트들이다.

http://localhost:3000/farm 일때 콘솔에 Component 를 출력하면 나오는 값

 

import "../styles/globals.css";
import NavBar from "../components/NavBar";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <NavBar />  // 공통 Navigation 설정
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

 

 

Next.js 에서는 페이지나 컴포넌트 내에 CSS 를 import 하고 싶다면,

저번 포스팅에 사용했던 module 을 써야한다.

그렇지 않으면 에러가 발생!

 

하지만 _app.js 에서는 모든 Global style 을 import 할 수 있다.

 

📌  _app.js 내에서 할 수 있는 일

• 페이지 간의 공통 레이아웃 갖기
• 공통의 state 갖기 (store 설정)  페이지 전환 이후에도 state 값 유지 가능, ...
• Global CSS 정의하기
• 각 Route 구성요소 매핑하기
• Redux Provider 설정하기

 

📌  알아둬야하는 사항

• App component는 getStaticProps 나 getServersideProps 를 지원하지 않는다.