From a3ffa2e65f1d0158acde82f7fde41c4a5bb4e699 Mon Sep 17 00:00:00 2001
From: Darsh Patel <darshkpatel@gmail.com>
Date: Tue, 16 Jun 2020 16:57:20 +0530
Subject: [PATCH] switch to function component with-react-intl example 
 (#14217)

The example was using class-based component for custom _app, switched to functional component approach.


**Sidenote:** The existing code didn't gave an error when navigated to a new page using the navbar
![Screenshot 2020-06-16 at 2 47 52 PM](https://user-images.githubusercontent.com/11258286/84760988-6cbebd80-afe6-11ea-9b7f-98aca7404895.png)
---
 examples/with-react-intl/pages/_app.js | 53 ++++++++++++--------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/examples/with-react-intl/pages/_app.js b/examples/with-react-intl/pages/_app.js
index 45cea8c352..87acb14fac 100644
--- a/examples/with-react-intl/pages/_app.js
+++ b/examples/with-react-intl/pages/_app.js
@@ -1,41 +1,36 @@
-import App from 'next/app'
 import { createIntl, createIntlCache, RawIntlProvider } from 'react-intl'
 
 // This is optional but highly recommended
 // since it prevents memory leak
 const cache = createIntlCache()
 
-export default class MyApp extends App {
-  static async getInitialProps({ Component, ctx }) {
-    let pageProps = {}
+function MyApp({ Component, pageProps, locale, messages }) {
+  const intl = createIntl(
+    {
+      locale,
+      messages,
+    },
+    cache
+  )
+  return (
+    <RawIntlProvider value={intl}>
+      <Component {...pageProps} />
+    </RawIntlProvider>
+  )
+}
 
-    if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps(ctx)
-    }
+MyApp.getInitialProps = async ({ Component, ctx }) => {
+  let pageProps = {}
 
-    // 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
+  const { req } = ctx
+  const locale = req?.locale ?? ''
+  const messages = req?.messages ?? {}
 
-    return { pageProps, locale, messages }
+  if (Component.getInitialProps) {
+    Object.assign(pageProps, await Component.getInitialProps(ctx))
   }
 
-  render() {
-    const { Component, pageProps, locale, messages } = this.props
-
-    const intl = createIntl(
-      {
-        locale,
-        messages,
-      },
-      cache
-    )
-
-    return (
-      <RawIntlProvider value={intl}>
-        <Component {...pageProps} />
-      </RawIntlProvider>
-    )
-  }
+  return { pageProps, locale, messages }
 }
+
+export default MyApp
-- 
GitLab