Update with-prefetching example

## Changelog

- Remove `getInitialProps`
- Explain variants
- Reflect latest changes in the prefetch api
- Update UI

examples/with-prefetching/README.md

@@ -42,5 +42,7 @@ now
 This example features:
 
 - An app with four simple pages
-- The "about" page uses the imperative (i.e.: "manual") prefetching API to prefetch on hover
-- It will prefetch all the pages in the background except the "contact" page
+
+  - Home/Features: Default api
+  - About: Imperative api
+  - Contact: Disable api

examples/with-prefetching/components/Header.js

@@ -1,39 +1,47 @@
-import Router from 'next/router'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
-export default () => (
-  <div>
-    {/* Prefetch using the declarative API */}
-    <Link prefetch href='/'>
-      <a>Home</a>
-    </Link>
-
-    <Link prefetch href='/features'>
-      <a>Features</a>
-    </Link>
-
-    {/* we imperatively prefetch on hover */}
-    <Link href='/about'>
-      <a
-        onMouseEnter={() => {
-          Router.prefetch('/about')
-          console.log('prefetching /about!')
-        }}
-      >
-        About
-      </a>
-    </Link>
-
-    <Link href='/contact'>
-      <a>
-        Contact (<small>NO-PREFETCHING</small>)
-      </a>
-    </Link>
-
-    <style jsx>{`
-      a {
-        margin-right: 10px;
-      }
-    `}</style>
-  </div>
-)
+export default function Header () {
+  const router = useRouter()
+  return (
+    <div className='root'>
+      <h2>Default</h2>
+      <p>
+        Automatically prefetch pages in the background as soon the Link appears
+        in the view:
+      </p>
+      <Link href='/'>
+        <a>Home</a>
+      </Link>{' '}
+      <Link href='/features'>
+        <a>Features</a>
+      </Link>
+      <h2>Imperative</h2>
+      <p>Prefetch on onMouseEnter or on other events:</p>
+      <Link prefetch={false} href='/about'>
+        <a
+          onMouseEnter={() => {
+            router.prefetch('/about')
+            console.log('prefetching /about!')
+          }}
+        >
+          About
+        </a>
+      </Link>
+      <h2>Disable</h2>
+      <p>Disable prefetching</p>
+      <Link prefetch={false} href='/contact'>
+        <a>Contact</a>
+      </Link>
+      <style jsx>{`
+        .root {
+          border-bottom: 1px solid grey;
+          padding-bottom: 8px;
+        }
+        a {
+          margin-right: 10px;
+        }
+      `}</style>
+    </div>
+  )
+}

examples/with-prefetching/pages/_app.js

@@ -3,16 +3,6 @@ import React from 'react'
 import Header from '../components/Header'
 
 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 (

examples/with-prefetching/pages/about.js

@@ -1 +1 @@
-export default () => <p>This is the ABOUT page.</p>
+export default () => <h1>This is the ABOUT page.</h1>

examples/with-prefetching/pages/contact.js

@@ -1 +1 @@
-export default () => <p>This is the CONTACT page.</p>
+export default () => <h1>This is the CONTACT page.</h1>

examples/with-prefetching/pages/features.js

@@ -1 +1 @@
-export default () => <p>This is the FEATURES page.</p>
+export default () => <h1>This is the FEATURES page.</h1>

examples/with-prefetching/pages/index.js

@@ -1 +1 @@
-export default () => <p>This is the HOME page</p>
+export default () => <h1>This is the HOME page</h1>