[React] Next.js의 _app.tsx에 함수형 컴포넌트로 올바른 타입 찾아주기

Next.js의 _app.tsx 페이지는 모든 페이지를 담고 있는 최상위 컴포넌트입니다. 공식 가이드에서도 함수형으로 작성하지만, getInitialProps까지 고려한 올바른 타입을 찾아주기 어렵습니다. 공식 저장소의 질문에도 제대로 된 답변이 안달리는데... 하지만 제가 해냈습니다.

아래는 함수형 컴포넌트로 작성한 _app.tsx입니다.

import { NextComponentType } from "next"
import { AppContext, AppInitialProps, AppProps } from "next/app";

const MyApp: NextComponentType<AppContext, AppInitialProps, AppProps> = ({ Component, pageProps }) => {
  return <>
    <div>Valid MyApp type.</div>
    <Component {...pageProps} />
  </>
}

MyApp.getInitialProps = async ({ Component, ctx }: AppContext): Promise<AppInitialProps> => {
  let pageProps = {};

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
}

export default MyApp;

혹은 https://github.com/isaachinman/next-i18next/issues/615#issuecomment-575578375 처럼 App.getInitialProps를 사용할 수 있습니다.

- 2020년 11월 12일 내용 추가 link

toc

댓글의 sungpro님 덕분에 문서가 업데이트 된 것을 발견했습니다. 이제는 공식 문서를 참고하면 됩니다.

https://nextjs.org/docs/basic-features/typescript#custom-app

// import App from "next/app";
import type { AppProps /*, AppContext */ } from 'next/app'

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

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);

//   return { ...appProps }
// }

export default MyApp