update with-react-intl example (#4817)

examples/with-react-intl/README.md

@@ -46,7 +46,7 @@ This example app shows how to integrate [React Intl][] with Next.
 
 - Server-side language negotiation
 - React Intl locale data loading via `pages/_document.js` customization
-- React Intl integration at Next page level via `pageWithIntl()` HOC
+- React Intl integration with [custom App](https://github.com/zeit/next.js#custom-app) component
 - `<IntlProvider>` creation with `locale`, `messages`, and `initialNow` props
 - Default message extraction via `babel-plugin-react-intl` integration
 - Translation management via build script and customized Next server

examples/with-react-intl/components/PageWithIntl.js

@@ -1,44 +0,0 @@
-import React, {Component} from 'react'
-import {IntlProvider, addLocaleData, injectIntl} from 'react-intl'
-
-// Register React Intl's locale data for the user's locale in the browser. This
-// locale data was added to the page by `pages/_document.js`. This only happens
-// once, on initial page load in the browser.
-if (typeof window !== 'undefined' && window.ReactIntlLocaleData) {
-  Object.keys(window.ReactIntlLocaleData).forEach((lang) => {
-    addLocaleData(window.ReactIntlLocaleData[lang])
-  })
-}
-
-export default (Page) => {
-  const IntlPage = injectIntl(Page)
-
-  return class PageWithIntl extends Component {
-    static async getInitialProps (context) {
-      let props
-      if (typeof Page.getInitialProps === 'function') {
-        props = await Page.getInitialProps(context)
-      }
-
-      // Get the `locale` and `messages` from the request object on the server.
-      // In the browser, use the same values that the server serialized.
-      const {req} = context
-      const {locale, messages} = req || window.__NEXT_DATA__.props.pageProps
-
-      // Always update the current time on page load/transition because the
-      // <IntlProvider> will be a new instance even with pushState routing.
-      const now = Date.now()
-
-      return {...props, locale, messages, now}
-    }
-
-    render () {
-      const {locale, messages, now, ...props} = this.props
-      return (
-        <IntlProvider locale={locale} messages={messages} initialNow={now}>
-          <IntlPage {...props} />
-        </IntlProvider>
-      )
-    }
-  }
-}

examples/with-react-intl/pages/_app.js

@@ -0,0 +1,41 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+import { IntlProvider, addLocaleData } from 'react-intl'
+
+// Register React Intl's locale data for the user's locale in the browser. This
+// locale data was added to the page by `pages/_document.js`. This only happens
+// once, on initial page load in the browser.
+if (typeof window !== 'undefined' && window.ReactIntlLocaleData) {
+  Object.keys(window.ReactIntlLocaleData).forEach((lang) => {
+    addLocaleData(window.ReactIntlLocaleData[lang])
+  })
+}
+
+export default class MyApp extends App {
+  static async getInitialProps ({ Component, router, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    // Get the `locale` and `messages` from the request object on the server.
+    // In the browser, use the same values that the server serialized.
+    const { req } = ctx
+    const { locale, messages } = req || window.__NEXT_DATA__.props.pageProps
+
+    return { pageProps, locale, messages }
+  }
+
+  render () {
+    const { Component, pageProps, locale, messages } = this.props
+    const now = Date.now()
+    return (
+      <Container>
+        <IntlProvider locale={locale} messages={messages} initialNow={now}>
+          <Component {...pageProps} />
+        </IntlProvider>
+      </Container>
+    )
+  }
+}

examples/with-react-intl/pages/about.js

@@ -1,6 +1,5 @@
 import React, {Component} from 'react'
 import {FormattedRelative} from 'react-intl'
-import pageWithIntl from '../components/PageWithIntl'
 import Layout from '../components/Layout'
 
 class About extends Component {
@@ -22,4 +21,4 @@ class About extends Component {
   }
 }
 
-export default pageWithIntl(About)
+export default About

examples/with-react-intl/pages/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
-import {FormattedMessage, FormattedNumber, defineMessages} from 'react-intl'
+import {FormattedMessage, FormattedNumber, defineMessages, injectIntl} from 'react-intl'
 import Head from 'next/head'
-import pageWithIntl from '../components/PageWithIntl'
 import Layout from '../components/Layout'
 
 const {description} = defineMessages({
@@ -11,7 +10,7 @@ const {description} = defineMessages({
   }
 })
 
-export default pageWithIntl(({intl}) => (
+export default injectIntl(({intl}) => (
   <Layout>
     <Head>
       <meta name='description' content={intl.formatMessage(description)} />