Next.js - Custom App (using Page Directory)

* 23년 5월 5일 Next.js 13.4.0 버전 에서 App Router(stable) 버전이 릴리즈 되었습니다.

** Next.js 12 이하 버전까지는 Page Directory를, 13 버전 이후부터는 App Router를 권장합니다. (방식에 차이가 있으므로 주의)

(대표적으로 App Router에서는 Custom App 이 없습니다.)

 

 

Next에서는 App 컴포넌트를 사용하여 페이지를 초기화한다.

즉, Next는 기본적으로 가장 먼저 App Component를 확인하고 index.js의 컨텐츠들을 확인하기 때문에 모든 페이지들이 통과하는 관문이라고 볼 수 있다. 어떤 컴포넌트가 어느 페이지에 있어야 하는지, 모든 페이지들을 한 눈에 볼 수 있는 청사진 역할을 한다.

 

 

App 컴포넌트를 사용해서 다음과 같은 일들을 수행할 수 있다.

 

• 페이지 변경 간에 레이아웃 유지
• 페이지 navigate시 state 유지
• 페이지에 추가 데이터 삽입
• 글로벌 CSS 추가

 

1. App component를 커스텀하려면(재정의 혹은 override라고 부르기도 한다. by 공식문서) pages 디렉토리 하위에 _app.tsx 파일을 생성한다.

import type { AppProps } from 'next/app';
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

 

• Component 는 실제 활성화된 page이므로 페이지간 이동이 발생하면 Component는 새롭게 이동한 page를 가리키게 된다.
• 그러므로, 어떤 props를 Component에 보내도 페이지에서 받을 수 있다.
• pageProps는 처음 페이지가 미리 로드되었을 때 생성된 초기 props 객체이다. (빈 객체일 수도 있음)

 

2. 주의사항

• app 구동 중에 Custom App을 수정했다면, 개발 서버 재기동하기
• 사용자 지정 getInitialProps 추가시 자동 Static 최적화는 불가능하다.
• getInitialProps 추가시 import App from "next/app" 호출하기