diff --git a/examples/with-emotion-11/pages/_app.js b/examples/with-emotion-11/pages/_app.js
index 8db2357327..4999ec025d 100644
--- a/examples/with-emotion-11/pages/_app.js
+++ b/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 (
-
- {globalStyles}
-
-
- )
- }
+// see: https://nextjs.org/docs/advanced-features/custom-app
+function MyApp({ Component, pageProps }) {
+ return (
+
+ {globalStyles}
+
+
+ )
}
+
+// 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