Update legacy _app context (#9083)

packages/next/client/router.ts

@@ -13,7 +13,7 @@ type SingletonRouterBase = {
   ready(cb: () => any): void
 }
 
-export { Router, NextRouter }
+export { Router, RouterContext, NextRouter }
 
 export type SingletonRouter = SingletonRouterBase & NextRouter
 

packages/next/client/with-router.tsx

 import React from 'react'
-import PropTypes from 'prop-types'
 import { NextComponentType, NextPageContext } from '../next-server/lib/utils'
-import { NextRouter } from './router'
+import { NextRouter, RouterContext } from './router'
 
 export type WithRouterProps = {
   router: NextRouter
@@ -21,19 +20,12 @@ export default function withRouter<
   class WithRouteWrapper extends React.Component<ExcludeRouterProps<P>> {
     static displayName?: string
     static getInitialProps?: any
-    static contextTypes = {
-      router: PropTypes.object,
-    }
+    static contextType = RouterContext
 
-    context!: WithRouterProps
+    context!: React.ContextType<typeof RouterContext>
 
     render() {
-      return (
-        <ComposedComponent
-          router={this.context.router}
-          {...this.props as any}
-        />
-      )
+      return <ComposedComponent router={this.context} {...this.props as any} />
     }
   }
 

packages/next/pages/_app.tsx

 import React, { ErrorInfo } from 'react'
-import PropTypes from 'prop-types'
 import {
   execOnce,
   loadGetInitialProps,
@@ -7,7 +6,7 @@ import {
   AppInitialProps,
   AppPropsType,
 } from '../next-server/lib/utils'
-import { Router, makePublicRouterInstance } from '../client/router'
+import { Router } from '../client/router'
 
 export { AppInitialProps }
 
@@ -31,18 +30,9 @@ export default class App<P = {}, CP = {}, S = {}> extends React.Component<
   P & AppProps<CP>,
   S
 > {
-  static childContextTypes = {
-    router: PropTypes.object,
-  }
   static origGetInitialProps = appGetInitialProps
   static getInitialProps = appGetInitialProps
 
-  getChildContext() {
-    return {
-      router: makePublicRouterInstance(this.props.router),
-    }
-  }
-
   // Kept here for backwards compatibility.
   // When someone ended App they could call `super.componentDidCatch`.
   // @deprecated This method is no longer needed. Errors are caught at the top level

test/integration/build-stats-output/test/index.test.js

@@ -9,6 +9,6 @@ const appDir = join(__dirname, '../react-site')
 describe('Build Stats Output', () => {
   it('Shows correct package count in output', async () => {
     const { stdout } = await nextBuild(appDir, undefined, { stdout: true })
-    expect(stdout).toMatch(/\/something .*?5/)
+    expect(stdout).toMatch(/\/something .*?4/)
   })
 })