update with-react-intl example (#4817)

vercel · Jul 21, 2018 · 822cc3c · 822cc3c
1 parent 0d93d42
commit 822cc3c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 50 deletions.
diff --git a/examples/with-react-intl/README.md b/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

diff --git a/examples/with-react-intl/components/PageWithIntl.js b/examples/with-react-intl/components/PageWithIntl.js
diff --git a/examples/with-react-intl/pages/_app.js b/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>
+    )
+  }
+}
diff --git a/examples/with-react-intl/pages/about.js b/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
diff --git a/examples/with-react-intl/pages/index.js b/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)} />