diff --git a/examples/with-prefetching/README.md b/examples/with-prefetching/README.md index 4b70ea7777572..6a33e2bf1a748 100644 --- a/examples/with-prefetching/README.md +++ b/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 diff --git a/examples/with-prefetching/components/Header.js b/examples/with-prefetching/components/Header.js index c7d000f78d819..d6f34eaa3f51b 100644 --- a/examples/with-prefetching/components/Header.js +++ b/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 () => ( -
- {/* Prefetch using the declarative API */} - - Home - - - - Features - - - {/* we imperatively prefetch on hover */} - - { - Router.prefetch('/about') - console.log('prefetching /about!') - }} - > - About - - - - - - Contact (NO-PREFETCHING) - - - - -
-) +export default function Header () { + const router = useRouter() + return ( +
+

Default

+

+ Automatically prefetch pages in the background as soon the Link appears + in the view: +

+ + Home + {' '} + + Features + +

Imperative

+

Prefetch on onMouseEnter or on other events:

+ + { + router.prefetch('/about') + console.log('prefetching /about!') + }} + > + About + + +

Disable

+

Disable prefetching

+ + Contact + + +
+ ) +} diff --git a/examples/with-prefetching/pages/_app.js b/examples/with-prefetching/pages/_app.js index 60b62e6f16fda..b0ce8eae7735f 100644 --- a/examples/with-prefetching/pages/_app.js +++ b/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 ( diff --git a/examples/with-prefetching/pages/about.js b/examples/with-prefetching/pages/about.js index ae26598fb784b..5112d2563e9af 100644 --- a/examples/with-prefetching/pages/about.js +++ b/examples/with-prefetching/pages/about.js @@ -1 +1 @@ -export default () =>

This is the ABOUT page.

+export default () =>

This is the ABOUT page.

diff --git a/examples/with-prefetching/pages/contact.js b/examples/with-prefetching/pages/contact.js index 2932f6cbd8b55..0bc89f9b3fe9d 100644 --- a/examples/with-prefetching/pages/contact.js +++ b/examples/with-prefetching/pages/contact.js @@ -1 +1 @@ -export default () =>

This is the CONTACT page.

+export default () =>

This is the CONTACT page.

diff --git a/examples/with-prefetching/pages/features.js b/examples/with-prefetching/pages/features.js index dc59e799c9f7d..1782964a1f88d 100644 --- a/examples/with-prefetching/pages/features.js +++ b/examples/with-prefetching/pages/features.js @@ -1 +1 @@ -export default () =>

This is the FEATURES page.

+export default () =>

This is the FEATURES page.

diff --git a/examples/with-prefetching/pages/index.js b/examples/with-prefetching/pages/index.js index b2c6ebfcd4725..a97e0482d792b 100644 --- a/examples/with-prefetching/pages/index.js +++ b/examples/with-prefetching/pages/index.js @@ -1 +1 @@ -export default () =>

This is the HOME page

+export default () =>

This is the HOME page