bug(typedef): AppType typedef changed in 12.3

[juliusmarminge]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:28:23 PDT 2022; root:xnu-8020.141.5~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: 7.10.0
    Relevant packages:
      next: 12.3.0
      eslint-config-next: 12.3.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When bumping version to Next 12.3.0 we ran into some troubles with the AppType typedefinition:

The AppType typedefinition and specifically the pageProps seems to have been broken in 12.3.0 and the pageProps now evaluates to {}:

Expected Behavior

I am not sure if this is a bug or if it's intended, but this change is not present in the changelog and seems to be a "breaking" one worth noting. Maybe we are required to augment some part to make it work with 3rd party dependencies?

Link to reproduction

https://github.com/juliusmarminge/apptype-repro

To Reproduce

Create a new next-app (using reproduction template):

npx create-next-app -e reproduction-template

Install NextAuth:

nom install next-auth

Create pages/_app.tsx with the following content:

import { SessionProvider } from "next-auth/react";
import type { AppType } from "next/dist/shared/lib/utils";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

Hover pageProps, it evaluates to {} and the pageProps.session will error. This was not an issue in 12.2.5.

[c-ehrlich]

Appears to be related to this typedef change

12.2:

export declare type AppInitialProps = {
    pageProps: any;
};
export declare type AppPropsType<R extends NextRouter = NextRouter, P = {}> = AppInitialProps & {
    Component: NextComponentType<NextPageContext, any, P>;
    router: R;
    __N_SSG?: boolean;
    __N_SSP?: boolean;
    __N_RSC?: boolean;
};

12.3:

export declare type AppInitialProps<P = any> = {
    pageProps: P;
};
export declare type AppPropsType<R extends NextRouter = NextRouter, P = {}> = AppInitialProps<P> & {
    Component: NextComponentType<NextPageContext, any, any>;
    router: R;
    __N_SSG?: boolean;
    __N_SSP?: boolean;
    __N_RSC?: boolean;
};

[juliusmarminge]

Appears to be related to this typedef change

12.2:

export declare type AppInitialProps = {

    pageProps: any;

};

export declare type AppPropsType<R extends NextRouter = NextRouter, P = {}> = AppInitialProps & {

    Component: NextComponentType<NextPageContext, any, P>;

    router: R;

    __N_SSG?: boolean;

    __N_SSP?: boolean;

    __N_RSC?: boolean;

};

12.3:

export declare type AppInitialProps<P = any> = {

    pageProps: P;

};

export declare type AppPropsType<R extends NextRouter = NextRouter, P = {}> = AppInitialProps<P> & {

    Component: NextComponentType<NextPageContext, any, any>;

    router: R;

    __N_SSG?: boolean;

    __N_SSP?: boolean;

    __N_RSC?: boolean;

};

To be clear i think this is a very good improvement and seems like it would allow for a more typesafe usage in the root app.

Maybe the AppType should be a generic like NextPage, or React.FC and letting me pass in the props like

const MyApp: AppType<{ session: Session }> = ...

[balazsorban44]

Hi, AppType is not exposed/documented (you are importing it from next/dist/shared/lib/utils), so this does not count as a bug. To type the props of App, you can do:

import type { AppProps } from "next/app"
import type { Session } from "next-auth"
import { SessionProvider } from "next-auth/react"

export default function MyApp(appProps: AppProps<{ session: Session }>) {
  const {
    Component,
    pageProps: { session, ...pageProps },
  } = appProps
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

[juliusmarminge]

Hi, AppType is not exposed/documented (you are importing it from next/dist/shared/lib/utils), so this does not count as a bug. To type the props of App, you can do:

import type { AppProps } from "next/app"
import type { Session } from "next-auth"
import { SessionProvider } from "next-auth/react"

export default function MyApp(appProps: AppProps<{ session: Session }>) {
  const {
    Component,
    pageProps: { session, ...pageProps },
  } = appProps
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

Thanks for the response. I've always thought the import path has been weird and could probably have guessed it wasn't for official usage.

However... typing arrow function components like const MyApp: AppType is very nice imo in that you get typesafety over the props and the return type at the same time.

Would you accept this as a feature request in exposing this type similar to the AppProps and allow it as a generic

import type { AppType } from "next/app";

const MyApp: AppType<{ session: Session }> = ({
  Component,
  pageProps
}) => { ... };

export default trpc.withTRPC(MyApp); // example

The alternative would be to just type the return type explicitly but not as clean imo

import type { AppProps } from "next/app";

const MyApp = (
  { Component, pageProps}: AppProps<{ session: Session }>
): JSX.Element => { ...}

[balazsorban44]

Yes, it makes more sense as a feature request, I started working on it already. See #40391

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.