better type for AppTree in NextPageContext (#8662)

* better type for AppTree in NextPageContext

* updated tests

* new AppTreeType type and updated tests

* removed a commented out line

* another take on the type of AppTree, with updated tests

* allow passing additional props to AppType

* Update suite name

packages/next/next-server/lib/utils.ts

@@ -28,6 +28,10 @@ export type AppType = NextComponentType<
   AppPropsType
 >
 
+export type AppTreeType = ComponentType<
+  AppInitialProps & { [name: string]: any }
+>
+
 export type Enhancer<C> = (Component: C) => C
 
 export type ComponentsEnhancer =
@@ -98,12 +102,12 @@ export interface NextPageContext {
   /**
    * `Component` the tree of the App to use if needing to render separately
    */
-  AppTree: AppType
+  AppTree: AppTreeType
 }
 
 export type AppContextType<R extends NextRouter = NextRouter> = {
   Component: NextComponentType<NextPageContext>
-  AppTree: AppType
+  AppTree: AppTreeType
   ctx: NextPageContext
   router: R
 }

test/integration/app-tree/pages/_app.tsx

@@ -5,29 +5,15 @@ import App, { AppContext } from 'next/app'
 import { renderToString } from 'react-dom/server'
 
 class MyApp<P = {}> extends App<P & { html: string }> {
-  static async getInitialProps({
-    Component,
-    AppTree,
-    router,
-    ctx,
-  }: AppContext) {
+  static async getInitialProps({ Component, AppTree, ctx }: AppContext) {
     let pageProps = {}
 
     if (Component.getInitialProps) {
       pageProps = await Component.getInitialProps(ctx)
     }
 
-    let html
-    const toRender = (
-      <AppTree
-        {...{
-          router,
-          Component,
-          pageProps,
-          another: 'hello',
-        }}
-      />
-    )
+    let html: string
+    const toRender = <AppTree pageProps={pageProps} another="prop" />
 
     if (typeof window !== 'undefined') {
       const el = document.createElement('div')

test/integration/app-tree/pages/hello.tsx

@@ -1,7 +1,9 @@
+import React from 'react'
 import { render } from 'react-dom'
 import { renderToString } from 'react-dom/server'
+import { NextPage } from 'next'
 
-const Page = ({ html }) =>
+const Page: NextPage<{ html: string }> = ({ html }) =>
   html ? (
     <>
       <p>saved:</p>
@@ -11,11 +13,10 @@ const Page = ({ html }) =>
     <p>Hello world</p>
   )
 
-Page.getInitialProps = async ({ AppTree, pathname, query, asPath }) => {
-  let html
-  const toRender = (
-    <AppTree router={{ pathname, query, asPath }} Component={Page} />
-  )
+Page.getInitialProps = async ({ AppTree }) => {
+  let html: string
+
+  const toRender = <AppTree pageProps={{}} />
 
   if (typeof window !== 'undefined') {
     const el = document.createElement('div')

test/integration/app-tree/test/index.test.js

@@ -52,7 +52,7 @@ const runTests = () => {
   })
 }
 
-describe('Auto Export', () => {
+describe('AppTree', () => {
   describe('dev mode', () => {
     beforeAll(async () => {
       appPort = await findPort()