Migrate next/head to use React.createContext

packages/next-server/lib/head-manager-context.ts

@@ -0,0 +1,3 @@
+import * as React from 'react'
+
+export const HeadManagerContext = React.createContext(null)

packages/next-server/lib/head.js

@@ -1,11 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import sideEffect from './side-effect'
+import { HeadManagerContext } from './head-manager-context'
 
 class Head extends React.Component {
-  static contextTypes = {
-    headManager: PropTypes.object
-  }
+  static contextType = HeadManagerContext
 
   render () {
     return null
@@ -47,8 +46,8 @@ function mapOnServer (head) {
 }
 
 function onStateChange (head) {
-  if (this.context && this.context.headManager) {
-    this.context.headManager.updateHead(head)
+  if (this.context) {
+    this.context.updateHead(head)
   }
 }
 

packages/next-server/lib/side-effect.js

@@ -37,6 +37,7 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
       static canUseDOM = typeof window !== 'undefined'
 
       static contextTypes = WrappedComponent.contextTypes
+      static contextType = WrappedComponent.contextType
 
       // Try to use displayName of wrapped component
       static displayName = `SideEffect(${getDisplayName(WrappedComponent)})`

packages/next/client/index.js

@@ -8,6 +8,7 @@ import PageLoader from './page-loader'
 import * as envConfig from 'next-server/config'
 import ErrorBoundary from './error-boundary'
 import Loadable from 'next-server/dist/lib/loadable'
+import { HeadManagerContext } from 'next-server/dist/lib/head-manager-context'
 
 // Polyfill Promise globally
 // This is needed because Webpack's dynamic loading(common chunks) code
@@ -181,7 +182,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
   if (process.env.NODE_ENV === 'development') {
     renderReactElement((
       <RouterContext.Provider value={makePublicRouterInstance(router)}>
-        <App {...appProps} />
+        <HeadManagerContext.Provider value={headManager}>
+          <App {...appProps} />
+        </HeadManagerContext.Provider>
       </RouterContext.Provider>
     ), appContainer)
   } else {
@@ -196,7 +199,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
     renderReactElement((
       <ErrorBoundary onError={onError}>
         <RouterContext.Provider value={makePublicRouterInstance(router)}>
-          <App {...appProps} />
+          <HeadManagerContext.Provider value={headManager}>
+            <App {...appProps} />
+          </HeadManagerContext.Provider>
         </RouterContext.Provider>
       </ErrorBoundary>
     ), appContainer)

packages/next/pages/_app.js

@@ -1,24 +1,12 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { execOnce, loadGetInitialProps } from 'next-server/dist/lib/utils'
 
 export default class App extends Component {
-  static childContextTypes = {
-    headManager: PropTypes.object
-  }
-
   static async getInitialProps ({ Component, router, ctx }) {
     const pageProps = await loadGetInitialProps(Component, ctx)
     return {pageProps}
   }
 
-  getChildContext () {
-    const { headManager } = this.props
-    return {
-      headManager
-    }
-  }
-
   // Kept here for backwards compatibility.
   // When someone ended App they could call `super.componentDidCatch`. This is now deprecated.
   componentDidCatch (err) {
@@ -28,9 +16,11 @@ export default class App extends Component {
   render () {
     const {router, Component, pageProps} = this.props
     const url = createUrl(router)
-    return <Container>
-      <Component {...pageProps} url={url} />
-    </Container>
+    return (
+      <Container>
+        <Component {...pageProps} url={url} />
+      </Container>
+    )
   }
 }