NextJS _app.tsx 组件和 pageProps 应该是什么 TypeScript 类型？

Question

Here's the default _app.tsx from NextJS:

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

The problem is, as soon as you switch to TypeScript, you get a warning under ES6Lint that these types are intrinsicly set to type 'any'. That being said, I can't figure out what type to set these two to that wont cause more errors later of mismatched types. What TypeScript types should I cast these two as?

Answer 1

You could import the types from nextjs .

import { AppProps } from 'next/app';

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

Answer 2

Improved AppProps to allow customisable pageProps

NextJS provides an AppProps type out of the box that you can easily import and use in your _app component. This will provide the types you asked for. However, as mentioned in another comment, this type restricts pageProps to the any type by default, which may not be what you want.

If you want more control over this, it turns out that AppProps does take a type argument, but only passes it down to Component , leaving pageProps as the any type no matter what.

We can fix this with a tweak to the AppProps type that actually passes it's type argument to pageProps as well. See working example below.

_app.tsx

// importing the provided NextJS type
import type { AppProps as NextAppProps } from "next/app";

// modified version - allows for custom pageProps type, falling back to 'any'
type AppProps<P = any> = {
  pageProps: P;
} & Omit<NextAppProps<P>, "pageProps">;

// use the new type like so, replacing 'CustomPageProps' with whatever you want
export default function App({
  Component,
  pageProps,
}: AppProps<CustomPageProps>) {
  //...
}

Answer 3

If you still getting the warning of 'Missing return type on function', just add return type JSX.Element

import { AppProps } from 'next/app'

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

Answer 4

In case you need the err object too:

export default function App({
  Component,
  pageProps,
  err,
}: AppProps & { err: any }) {
  // Workaround for https://github.com/vercel/next.js/issues/8592
  return <Component {...pageProps} err={err} />
}

Answer 5

I believe you need types that will be caught up by getInitialProps as well. There they are:

type Props<P> = AppProps & P;

interface AppType<P> {
  (props: Props<P>): ReactElement;
  getInitialProps?: (context: AppContext) => Props<P> | Promise<Props<P>>;
}

Answer 6

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

import type { AppProps } from 'next/app'

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