Nextjs는 App 컴포넌트를 사용하여 page를 초기화합니다. (pages 가 동작되기 전에 먼저 실행됩니다.)
기본 App을 재정의 하려면 ./pages/_app.js
파일을 만듭니다.
custom app 에서 수행되는 작업들
페이지 변경 간에 레이아웃 유지 (ex: header 위치 고정)
페이지 탐색 시 state 유지
componentDidCatch 를 사용한 Custom 에러 처리
페이지에 추가 데이터 삽입
Global CSS 추가
( global.css → _app.js 에서만 선언 가능 / module이 아닌 일반적인 css 파일로 생성 )
globals.css파일은 이름 그대로 전역에서 사용될 스타일을 작성해주시면 됩니다
// JavaScript
import Header from "../components/Header";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<>
< Header />
< Component {...pageProps} />
</>
)
}
export default MyApp;
// TypeScript
import { AppProps } from 'next/dist/shared/lib/router/router'
import Header from "../components/Header";
import "../styles/globals.css";
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
< Header />
< Component {...pageProps} />
</>
)
}
export default MyApp