Update with-emotion-11 example to use functional _app component (#12183)

examples/with-emotion-11/pages/_app.js

@@ -1,17 +1,29 @@
+// import App from 'next/app'
 import * as React from 'react'
-import NextApp from 'next/app'
 import { CacheProvider } from '@emotion/react'
 import { cache } from '@emotion/css'
 import { globalStyles } from '../shared/styles'
 
-export default class App extends NextApp {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <CacheProvider value={cache}>
-        {globalStyles}
-        <Component {...pageProps} />
-      </CacheProvider>
-    )
-  }
+// see: https://nextjs.org/docs/advanced-features/custom-app
+function MyApp({ Component, pageProps }) {
+  return (
+    <CacheProvider value={cache}>
+      {globalStyles}
+      <Component {...pageProps} />
+    </CacheProvider>
+  )
 }
+
+// Only uncomment this method if you have blocking data requirements for
+// every single page in your application. This disables the ability to
+// perform automatic static optimization, causing every page in your app to
+// be server-side rendered.
+//
+// MyApp.getInitialProps = async appContext => {
+//   // calls page's `getInitialProps` and fills `appProps.pageProps`
+//   const appProps = await App.getInitialProps(appContext)
+
+//   return { ...appProps }
+// }
+
+export default MyApp