[Docs] Prefer function _app component in examples (#39967)

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

examples/with-grommet/pages/_app.js

@@ -1,13 +1,9 @@
-import App from 'next/app'
 import { Grommet, grommet as grommetTheme } from 'grommet'
 
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <Grommet theme={grommetTheme}>
-        <Component {...pageProps} />
-      </Grommet>
-    )
-  }
+export default function App({ Component, pageProps }) {
+  return (
+    <Grommet theme={grommetTheme}>
+      <Component {...pageProps} />
+    </Grommet>
+  )
 }

examples/with-orbit-components/pages/_app.js

@@ -1,5 +1,3 @@
-import * as React from 'react'
-import App from 'next/app'
 import { getTokens } from '@kiwicom/orbit-components'
 import { ThemeProvider, createGlobalStyle } from 'styled-components'
 
@@ -14,16 +12,13 @@ const GlobalStyle = createGlobalStyle`
 
 const tokens = getTokens()
 
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <ThemeProvider theme={{ orbit: tokens }}>
-        <>
-          <GlobalStyle />
-          <Component {...pageProps} />
-        </>
-      </ThemeProvider>
-    )
-  }
+export default function App({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={{ orbit: tokens }}>
+      <>
+        <GlobalStyle />
+        <Component {...pageProps} />
+      </>
+    </ThemeProvider>
+  )
 }

examples/with-portals-ssr/pages/_app.js

@@ -1,4 +1,3 @@
-import App from 'next/app'
 import { prepareClientPortals } from '@jesstelford/react-portal-universal'
 
 if (typeof window !== 'undefined') {
@@ -8,17 +7,12 @@ if (typeof window !== 'undefined') {
   prepareClientPortals()
 }
 
-class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      /* This is where we'll render one of our universal portals */
-      <>
-        <div id="modal" />
-        <Component {...pageProps} />
-      </>
-    )
-  }
+export default function App({ Component, pageProps }) {
+  return (
+    /* This is where we'll render one of our universal portals */
+    <>
+      <div id="modal" />
+      <Component {...pageProps} />
+    </>
+  )
 }
-
-export default MyApp

examples/with-prefetching/pages/_app.js

@@ -1,14 +1,10 @@
-import App from 'next/app'
 import Nav from '../components/Nav'
 
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <>
-        <Nav />
-        <Component {...pageProps} />
-      </>
-    )
-  }
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Nav />
+      <Component {...pageProps} />
+    </>
+  )
 }

examples/with-react-jss/pages/_app.js

@@ -1,11 +1,11 @@
-import App from 'next/app'
+import { useEffect } from 'react'
 
-export default class MyApp extends App {
-  componentDidMount() {
+export default function App({ Component, pageProps }) {
+  useEffect(() => {
     const style = document.getElementById('server-side-styles')
-
     if (style) {
       style.parentNode.removeChild(style)
     }
-  }
+  }, [])
+  return <Component {...pageProps} />
 }

examples/with-stencil/packages/web-app/pages/_app.js

@@ -1,17 +1,11 @@
-import React from 'react'
-import App from 'next/app'
-
+import { useLayoutEffect } from 'react'
 import { applyPolyfills, defineCustomElements } from 'test-component/loader'
 
-export default class MyApp extends App {
-  componentDidMount() {
+export default function App({ Component, pageProps }) {
+  useLayoutEffect(() => {
     applyPolyfills().then(() => {
       defineCustomElements(window)
     })
-  }
-
-  render() {
-    const { Component, pageProps } = this.props
-    return <Component {...pageProps} />
-  }
+  }, [])
+  return <Component {...pageProps} />
 }

examples/with-styled-components-rtl/pages/_app.js

@@ -1,4 +1,3 @@
-import App from 'next/app'
 import { ThemeProvider } from 'styled-components'
 
 const theme = {
@@ -7,14 +6,10 @@ const theme = {
   },
 }
 
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-
-    return (
-      <ThemeProvider theme={theme}>
-        <Component {...pageProps} />
-      </ThemeProvider>
-    )
-  }
+export default function App({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
 }

examples/with-styletron/pages/_app.js

@@ -1,14 +1,10 @@
-import App from 'next/app'
 import { Provider as StyletronProvider } from 'styletron-react'
 import { styletron } from '../styletron'
 
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <StyletronProvider value={styletron}>
-        <Component {...pageProps} />
-      </StyletronProvider>
-    )
-  }
+export default function App({ Component, pageProps }) {
+  return (
+    <StyletronProvider value={styletron}>
+      <Component {...pageProps} />
+    </StyletronProvider>
+  )
 }