diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md index 7573404122cd3b8..82ab5b88fd68734 100644 --- 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 index 0ed321dce58843a..ab0f1b9cfb82d33 100644 --- 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 index 282d54900f3d536..ebc53649086a791 100644 --- 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 ( - <> - - {/* Import CSS for nprogress */} - - - - - - ) - } +export default function App({ Component, pageProps }) { + return ( + <> + + {/* Import CSS for nprogress */} + + + + + + ) } diff --git a/examples/with-loading/pages/about.js b/examples/with-loading/pages/about.js index 39942733aae5c3c..ffa87104a122983 100644 --- a/examples/with-loading/pages/about.js +++ b/examples/with-loading/pages/about.js @@ -1,12 +1,10 @@ -import React from 'react' - const AboutPage = () =>

This is about Next.js!

-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 index 6d6c43815f56f77..f36f4ba4d4a0068 100644 --- a/examples/with-loading/pages/forever.js +++ b/examples/with-loading/pages/forever.js @@ -1,12 +1,10 @@ -import React from 'react' - const ForeverPage = () =>

This page was rendered for a while!

-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 index dc2940c298f9ca0..5070538cdf800ab 100644 --- a/examples/with-loading/pages/index.js +++ b/examples/with-loading/pages/index.js @@ -1,5 +1,3 @@ -import React from 'react' - const IndexPage = () =>

Hello Next.js!

export default IndexPage