Update with-loading example to SSG (#11050)

* Update getInitialProps to getStaticProps * Updated example Co-authored-by: Luis Alvarez <luis@zeit.co>
vercel · Mar 13, 2020 · 31a6410 · 31a6410
1 parent b596c21
commit 31a6410
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 46 deletions.
diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md
@@ -1,6 +1,6 @@
 # Example app with page loading indicator
 
-Sometimes when switching between pages, Next.js needs to download pages(chunks) from the server before rendering the page. And it may also need to wait for the data. So while doing these tasks, browser might be non responsive.
+Sometimes when switching between pages, Next.js needs to download pages(chunks) from the server before rendering the page. And it may also need to wait for the data. So while doing these tasks, the browser might be non responsive.
 
 We can simply fix this issue by showing a loading indicator. That's what this examples shows.
 

diff --git a/examples/with-loading/package.json b/examples/with-loading/package.json
@@ -1,7 +1,6 @@
 {
   "name": "with-loading",
   "version": "1.0.0",
-  "description": "This example features:",
   "main": "index.js",
   "scripts": {
     "dev": "next",

diff --git a/examples/with-loading/pages/_app.js b/examples/with-loading/pages/_app.js
@@ -1,9 +1,7 @@
-import React from 'react'
-import App from 'next/app'
-import Link from 'next/link'
-import NProgress from 'nprogress'
 import Router from 'next/router'
+import Link from 'next/link'
 import Head from 'next/head'
+import NProgress from 'nprogress'
 
 Router.events.on('routeChangeStart', url => {
   console.log(`Loading: ${url}`)
@@ -12,34 +10,31 @@ Router.events.on('routeChangeStart', url => {
 Router.events.on('routeChangeComplete', () => NProgress.done())
 Router.events.on('routeChangeError', () => NProgress.done())
 
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <>
-        <Head>
-          {/* Import CSS for nprogress */}
-          <link rel="stylesheet" type="text/css" href="/nprogress.css" />
-        </Head>
-        <nav>
-          <style jsx>{`
-            a {
-              margin: 0 10px 0 0;
-            }
-          `}</style>
-          <Link href="/">
-            <a>Home</a>
-          </Link>
-          <Link href="/about">
-            <a>About</a>
-          </Link>
-          <Link href="/forever">
-            <a>Forever</a>
-          </Link>
-          <a href="/non-existing">Non Existing Page</a>
-        </nav>
-        <Component {...pageProps} />
-      </>
-    )
-  }
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        {/* Import CSS for nprogress */}
+        <link rel="stylesheet" type="text/css" href="/nprogress.css" />
+      </Head>
+      <nav>
+        <style jsx>{`
+          a {
+            margin: 0 10px 0 0;
+          }
+        `}</style>
+        <Link href="/">
+          <a>Home</a>
+        </Link>
+        <Link href="/about">
+          <a>About</a>
+        </Link>
+        <Link href="/forever">
+          <a>Forever</a>
+        </Link>
+        <a href="/non-existing">Non Existing Page</a>
+      </nav>
+      <Component {...pageProps} />
+    </>
+  )
 }
diff --git a/examples/with-loading/pages/about.js b/examples/with-loading/pages/about.js
@@ -1,12 +1,10 @@
-import React from 'react'
-
 const AboutPage = () => <p>This is about Next.js!</p>
 
-AboutPage.getInitialProps = async () => {
+export async function getServerSideProps() {
   await new Promise(resolve => {
     setTimeout(resolve, 500)
   })
-  return {}
+  return { props: {} }
 }
 
 export default AboutPage
diff --git a/examples/with-loading/pages/forever.js b/examples/with-loading/pages/forever.js
@@ -1,12 +1,10 @@
-import React from 'react'
-
 const ForeverPage = () => <p>This page was rendered for a while!</p>
 
-ForeverPage.getInitialProps = async () => {
+export async function getServerSideProps() {
   await new Promise(resolve => {
     setTimeout(resolve, 3000)
   })
-  return {}
+  return { props: {} }
 }
 
 export default ForeverPage
diff --git a/examples/with-loading/pages/index.js b/examples/with-loading/pages/index.js
@@ -1,5 +1,3 @@
-import React from 'react'
-
 const IndexPage = () => <p>Hello Next.js!</p>
 
 export default IndexPage