🎉 공식문서 번역에 참여해주세요.  🐙  Github 바로가기  🐙
Docs
Pages Router
Building Your Application
Routing
Custom App

Custom App

Next.js는 App 컴포넌트를 사용하여 페이지를 초기화합니다. 이를 재정의하고 페이지 초기화를 제어할 수 있습니다.

Usage

기본 App을 오버라이드 하려면 아래와 같이 pages/_app파일을 생성합니다.

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

Component 프로퍼티는 활성 page이므로 라우트를 이동할 때마다 Component가 새 page로 변경됩니다. 따라서 Component로 보내는 모든 프로퍼티는 page에서 수신됩니다.

pageProps는 데이터 가져오기 메서드 중 하나에 의해 페이지에 미리 로딩된 초기 프로퍼티즈가 있는 객체이며, 그렇지 않으면 빈 객체입니다.

알아두면 유용한 정보

  • 앱이 실행 중이고 사용자 지정 App을 추가한 경우 개발 서버를 다시 시작해야 합니다. pages/_app.js가 이전에 존재하지 않았던 경우에만 필요합니다.
  • App은 Next.js 데이터 가져오기 메서드 (예: getStaticProps 또는 getServerSideProps) 를 지원하지 않습니다.

getInitialProps with App

App에서 getInitialProps를 사용하면 getStaticProps가 없는 페이지에 대한 자동 정적 최적화가 비활성화됩니다.

이 패턴은 사용하지 않는 것이 좋습니다. 대신 페이지 및 레이아웃에 대한 데이터를 더 쉽게 가져올 수 있는 앱 라우터를 점진적 도입하는 것을 고려하세요.

pages/_app.tsx
import App, { AppContext, AppInitialProps, AppProps } from 'next/app'
 
type AppOwnProps = { example: string }
 
export default function MyApp({
  Component,
  pageProps,
  example,
}: AppProps & AppOwnProps) {
  return (
    <>
      <p>Data: {example}</p>
      <Component {...pageProps} />
    </>
  )
}
 
MyApp.getInitialProps = async (
  context: AppContext,
): Promise<AppOwnProps & AppInitialProps> => {
  const ctx = await App.getInitialProps(context)
 
  return { ...ctx, example: 'data' }
}
pages/_app.jsx
import App from 'next/app'
 
export default function MyApp({ Component, pageProps, example }) {
  return (
    <>
      <p>Data: {example}</p>
      <Component {...pageProps} />
    </>
  )
}
 
MyApp.getInitialProps = async (context) => {
  const ctx = await App.getInitialProps(context)
 
  return { ...ctx, example: 'data' }
}
RedirectingCustom Document