Update examples to use getStaticProps where possible (#11136)

* Remove micro example

* Remove page that uses getInitialProps

* Update with-docker example

* Update dynamic import example

* Update Fela example

* Update Flow example

* Update framer motion example

* Remove freactal example

* Remove with-higher-order-component

* Remove with-immutable-redux-wrapper as it shows avenues to performance issues

* Remove example that doesn't have usage

* Update with-kea

* Remove example that is not used

* Update next-page-transitions example

* Remove next-routes example as dynamic routes are supported by default

* Add link to documentation

* Update Overmind example

* Update pretty-url-routing example

* Remove update with low usage

* Update with-react-ga example

* Update React Helmet example

* Remove mobile-detect from carousel example

* Remove react-useragent as it shows a bad practice

* Remove react-uwp example as it has low usage

* Remove recompose example as it shows outdated practices

* Remove refnux example as it has low usage

* Remove example that can be created using api routes

* Update with-segment-analytics

* Update socket.io example

* Remove socket.io example as it's shows bad practices

* Update static export example

* Update universal configuration example

examples/using-router/components/Header.js

@@ -4,7 +4,6 @@ export default () => (
   <div>
     <Link href="/">Home</Link>
     <Link href="/about">About</Link>
-    <Link href="/error">Error</Link>
   </div>
 )
 

examples/with-docker/README.md

@@ -47,14 +47,7 @@ Run the docker image:
 ```bash
 docker run --rm -it \
   -p 3000:3000 \
-  -e "API_URL=https://example.com" \
   next-app
 ```
 
 or use `yarn build-docker-multistage`
-
-Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
-
-```bash
-now --docker -e API_URL="https://example.com"
-```

examples/with-docker/package.json

@@ -7,7 +7,7 @@
     "start": "next start",
     "build-docker": "docker build -t next-app .",
     "build-docker-multistage": "docker build -t next-app -f ./Dockerfile.multistage .",
-    "run-docker": "docker run --rm -it -p 3000:3000 -e 'API_URL=https://example.com' next-app"
+    "run-docker": "docker run --rm -it -p 3000:3000 next-app"
   },
   "dependencies": {
     "next": "latest",

examples/with-docker/pages/index.js

@@ -1,16 +1,5 @@
 import React from 'react'
-import getConfig from 'next/config'
-const { publicRuntimeConfig } = getConfig()
 
-const { API_URL } = publicRuntimeConfig
-
-export default class extends React.Component {
-  static async getInitialProps() {
-    // fetch(`${API_URL}/some-path`)
-    return {}
-  }
-
-  render() {
-    return <div>The API_URL is {API_URL}</div>
-  }
+export default () => {
+  return <h1>Hello World!</h1>
 }

examples/with-dynamic-import/components/hello1.js

@@ -1 +1 @@
-export default () => <p>Hello World 1 (imported dynamiclly) </p>
+export default () => <p>Hello World 1 (imported dynamically) </p>

examples/with-dynamic-import/components/hello2.js

@@ -1 +1 @@
-export default () => <p>Hello World 2 (imported dynamiclly) </p>
+export default () => <p>Hello World 2 (imported dynamically) </p>

examples/with-dynamic-import/components/hello3.js

@@ -1 +1 @@
-export default () => <p>Hello World 3 (imported dynamiclly) </p>
+export default () => <p>Hello World 3 (imported dynamically) </p>

examples/with-dynamic-import/components/hello4.js

@@ -1 +1 @@
-export default () => <p>Hello World 4 (imported dynamiclly) </p>
+export default () => <p>Hello World 4 (imported dynamically) </p>

examples/with-dynamic-import/components/hello5.js

@@ -1 +1 @@
-export default () => <p>Hello World 5 (imported dynamiclly) </p>
+export default () => <p>Hello World 5 (imported dynamically) </p>

examples/with-dynamic-import/pages/index.js

@@ -1,39 +1,30 @@
-import React from 'react'
-import { useRouter } from 'next/router'
+import React, { useState } from 'react'
 import Header from '../components/Header'
 import dynamic from 'next/dynamic'
 
-const DynamicComponent1 = dynamic(import('../components/hello1'))
+const DynamicComponent1 = dynamic(() => import('../components/hello1'))
 
-const DynamicComponent2WithCustomLoading = dynamic({
-  loader: () => import('../components/hello2'),
-  loading: () => <p>Loading caused by client page transition ...</p>,
-})
-
-const DynamicComponent3WithNoSSR = dynamic({
-  loader: () => import('../components/hello3'),
-  loading: () => <p>Loading ...</p>,
-  ssr: false,
-})
+const DynamicComponent2WithCustomLoading = dynamic(
+  () => import('../components/hello2'),
+  {
+    loading: () => <p>Loading caused by client page transition ...</p>,
+  }
+)
 
-const DynamicComponent4 = dynamic({
-  loader: () => import('../components/hello4'),
-})
+const DynamicComponent3WithNoSSR = dynamic(
+  () => import('../components/hello3'),
+  {
+    loading: () => <p>Loading ...</p>,
+    ssr: false,
+  }
+)
 
-const DynamicComponent5 = dynamic({
-  loader: () => import('../components/hello5'),
-})
+const DynamicComponent4 = dynamic(() => import('../components/hello4'))
 
-const IndexPage = ({ showMore }) => {
-  const router = useRouter()
-  const handleToggle = () => {
-    if (showMore) {
-      router.push('/')
-      return
-    }
+const DynamicComponent5 = dynamic(() => import('../components/hello5'))
 
-    router.push('/?showMore=1')
-  }
+const IndexPage = () => {
+  const [showMore, setShowMore] = useState(false)
 
   return (
     <div>
@@ -53,13 +44,9 @@ const IndexPage = ({ showMore }) => {
 
       {/* Load on demand */}
       {showMore && <DynamicComponent5 />}
-      <button onClick={handleToggle}>Toggle Show More</button>
+      <button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
     </div>
   )
 }
 
-IndexPage.getInitialProps = ({ query }) => {
-  return { showMore: Boolean(query.showMore) }
-}
-
 export default IndexPage

examples/with-fela/pages/_app.js

@@ -1,24 +1,11 @@
-import App from 'next/app'
-import React from 'react'
 import FelaProvider from '../FelaProvider'
 
-export default class MyApp extends App {
-  static async getInitialProps({ Component, ctx }) {
-    let pageProps = {}
-
-    if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps(ctx)
-    }
-
-    return { pageProps }
-  }
-
-  render() {
-    const { Component, pageProps, renderer } = this.props
-    return (
-      <FelaProvider renderer={renderer}>
-        <Component {...pageProps} />
-      </FelaProvider>
-    )
-  }
+function MyApp({ Component, pageProps, renderer }) {
+  return (
+    <FelaProvider renderer={renderer}>
+      <Component {...pageProps} />
+    </FelaProvider>
+  )
 }
+
+export default MyApp

examples/with-flow/pages/_app.js

@@ -1,42 +1,30 @@
-import App from 'next/app'
 import Link from 'next/link'
 import React from 'react'
 
-export default class MyApp extends App {
-  static async getInitialProps({ Component, router, ctx }) {
-    let pageProps = {}
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <header>
+        <nav>
+          <Link href="/">
+            <a>Home</a>
+          </Link>
+          |
+          <Link href="/about">
+            <a>About</a>
+          </Link>
+          |
+          <Link href="/contact">
+            <a>Contact</a>
+          </Link>
+        </nav>
+      </header>
 
-    if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps(ctx)
-    }
+      <Component {...pageProps} />
 
-    return { pageProps }
-  }
-
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <>
-        <header>
-          <nav>
-            <Link href="/">
-              <a>Home</a>
-            </Link>
-            |
-            <Link href="/about">
-              <a>About</a>
-            </Link>
-            |
-            <Link href="/contact">
-              <a>Contact</a>
-            </Link>
-          </nav>
-        </header>
-
-        <Component {...pageProps} />
-
-        <footer>I`m here to stay</footer>
-      </>
-    )
-  }
+      <footer>I`m here to stay</footer>
+    </>
+  )
 }
+
+export default MyApp

examples/with-framer-motion/components/Gallery.js

@@ -33,7 +33,7 @@ const Thumbnail = ({ id, i }) => (
         variants={frameVariants}
         transition={transition}
       >
-        <Link href="/image/[id]" as={`/image/${i}`} scroll={false}>
+        <Link href="/image/[index]" as={`/image/${i}`} scroll={false}>
           <motion.img
             src={`https://static1.squarespace.com/static/5b475b2c50a54f54f9b4e1dc/t/${id}.jpg?format=1500w`}
             alt="The Barbican"

examples/with-framer-motion/components/SingleImage.js

@@ -23,12 +23,12 @@ const backVariants = {
   enter: { x: 0, opacity: 1, transition: { delay: 1, ...transition } },
 }
 
-const SingleImage = ({ id }) => (
+const SingleImage = ({ index }) => (
   <>
     <motion.div className="single" initial="exit" animate="enter" exit="exit">
       <motion.img
         variants={imageVariants}
-        src={`https://static1.squarespace.com/static/5b475b2c50a54f54f9b4e1dc/t/${images[id]}.jpg?format=1500w`}
+        src={`https://static1.squarespace.com/static/5b475b2c50a54f54f9b4e1dc/t/${images[index]}.jpg?format=1500w`}
         alt="The Barbican"
       />
       <motion.div className="back" variants={backVariants}>