What TypeScript type should NextJS _app.tsx Component and pageProps be?

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?

Solution 1

You could import the types from nextjs.

import { AppProps } from 'next/app';

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

Solution 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>) {
  //...
}

Solution 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} />
}

Solution 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} />
}

View more solutions

Comments

[rantao]

This is the recommended way, however this makes pageProps a type of any, which isn't very useful. Is there any way to apply a generic when using one of the date fetching methods, such as getInitialProps?

[lpke]

@rantao, see my answer below. I explain how to make the AppProps generic extend to pageProps as well, which gives you the option to provide a structure for the initial props.

[sohammondal]

thanks, this is what i exactly wanted.