Fix AppTree type not allowing extra props (#8352)

packages/next-server/lib/utils.ts

@@ -99,12 +99,12 @@ export interface NextPageContext {
   /**
    * `Component` the tree of the App to use if needing to render separately
    */
-  AppTree: NextComponentType
+  AppTree: AppType
 }
 
 export type AppContextType<R extends NextRouter = NextRouter> = {
   Component: NextComponentType<NextPageContext>
-  AppTree: NextComponentType
+  AppTree: AppType
   ctx: NextPageContext
   router: R
 }

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

 import React from 'react'
 import Link from 'next/link'
 import { render } from 'react-dom'
-import App, { Container } from 'next/app'
+import App, { Container, AppContext } from 'next/app'
 import { renderToString } from 'react-dom/server'
 
-class MyApp extends App {
-  static async getInitialProps ({ Component, AppTree, router, ctx }) {
+class MyApp<P = {}> extends App<P & { html: string }> {
+  static async getInitialProps({
+    Component,
+    AppTree,
+    router,
+    ctx,
+  }: AppContext) {
     let pageProps = {}
 
     if (Component.getInitialProps) {
@@ -17,7 +22,9 @@ class MyApp extends App {
       <AppTree
         {...{
           router,
-          Component
+          Component,
+          pageProps,
+          another: 'hello',
         }}
       />
     )
@@ -35,7 +42,7 @@ class MyApp extends App {
     return { pageProps, html }
   }
 
-  render () {
+  render() {
     const { Component, pageProps, html, router } = this.props
     const href = router.pathname === '/' ? '/another' : '/'
 

test/integration/app-tree/tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}