• Nextjs는 App 컴포넌트를 사용하여 page를 초기화합니다. (pages 가 동작되기 전에 먼저 실행됩니다.)

• 기본 App을 재정의 하려면 ./pages/_app.js 파일을 만듭니다.

• custom app 에서 수행되는 작업들

  1. 페이지 변경 간에 레이아웃 유지 (ex: header 위치 고정)

  2. 페이지 탐색 시 state 유지

  3. componentDidCatch 를 사용한 Custom 에러 처리

  4. 페이지에 추가 데이터 삽입

  5. 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