Refactor with-loading example (vercel#8560)

* Remove inline styles in favor of styled-jsx * Remove getInitialProps from app Allow automatic static optimization * Remove _document.js We really don’t need it in this example * Migrate Class to Function Components
rsccc · Sep 2, 2019 · 4a1215b · 4a1215b
1 parent a09036e
commit 4a1215b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 71 deletions.
diff --git a/examples/with-loading/pages/_app.js b/examples/with-loading/pages/_app.js
@@ -3,10 +3,7 @@ import App from 'next/app'
 import Link from 'next/link'
 import NProgress from 'nprogress'
 import Router from 'next/router'
-
-const linkStyle = {
-  margin: '0 10px 0 0'
-}
+import Head from 'next/head'
 
 Router.events.on('routeChangeStart', url => {
   console.log(`Loading: ${url}`)
@@ -16,35 +13,31 @@ Router.events.on('routeChangeComplete', () => NProgress.done())
 Router.events.on('routeChangeError', () => NProgress.done())
 
 export default class MyApp extends App {
-  static async getInitialProps ({ Component, router, ctx }) {
-    let pageProps = {}
-
-    if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps(ctx)
-    }
-
-    return { pageProps }
-  }
-
   render () {
     const { Component, pageProps } = this.props
     return (
       <>
-        <div style={{ marginBottom: 20 }}>
+        <Head>
+          {/* Import CSS for nprogress */}
+          <link rel='stylesheet' type='text/css' href='/static/nprogress.css' />
+        </Head>
+        <nav>
+          <style jsx>{`
+            a {
+              margin: 0 10px 0 0;
+            }
+          `}</style>
           <Link href='/'>
-            <a style={linkStyle}>Home</a>
+            <a>Home</a>
           </Link>
           <Link href='/about'>
-            <a style={linkStyle}>About</a>
+            <a>About</a>
           </Link>
           <Link href='/forever'>
-            <a style={linkStyle}>Forever</a>
+            <a>Forever</a>
           </Link>
-          <a href='/non-existing' style={linkStyle}>
-            Non Existing Page
-          </a>
-        </div>
-
+          <a href='/non-existing'>Non Existing Page</a>
+        </nav>
         <Component {...pageProps} />
       </>
     )

diff --git a/examples/with-loading/pages/_document.js b/examples/with-loading/pages/_document.js
diff --git a/examples/with-loading/pages/about.js b/examples/with-loading/pages/about.js
@@ -1,15 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
 
-export default class About extends Component {
-  // Add some delay
-  static async getInitialProps () {
-    await new Promise(resolve => {
-      setTimeout(resolve, 500)
-    })
-    return {}
-  }
+const AboutPage = () => <p>This is about Next.js!</p>
 
-  render () {
-    return <p>This is about Next!</p>
-  }
+AboutPage.getInitialProps = async () => {
+  await new Promise(resolve => {
+    setTimeout(resolve, 500)
+  })
+  return {}
 }
+
+export default AboutPage
diff --git a/examples/with-loading/pages/forever.js b/examples/with-loading/pages/forever.js
@@ -1,15 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
 
-export default class Forever extends Component {
-  // Add some delay
-  static async getInitialProps () {
-    await new Promise(resolve => {
-      setTimeout(resolve, 3000)
-    })
-    return {}
-  }
+const ForeverPage = () => <p>This page was rendered for a while!</p>
 
-  render () {
-    return <p>This page was rendered for a while!</p>
-  }
+ForeverPage.getInitialProps = async () => {
+  await new Promise(resolve => {
+    setTimeout(resolve, 3000)
+  })
+  return {}
 }
+
+export default ForeverPage
diff --git a/examples/with-loading/pages/index.js b/examples/with-loading/pages/index.js
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <p>Hello Next!</p>
+const IndexPage = () => <p>Hello Next.js!</p>
+
+export default IndexPage