diff --git a/examples/with-react-intl/pages/_app.js b/examples/with-react-intl/pages/_app.js
index 45cea8c352ff5f..87acb14fac4a43 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