2019-10-18 07:31:39 +02:00
|
|
|
import Link from 'next/link'
|
|
|
|
import { useRouter } from 'next/router'
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
export default function Nav() {
|
2019-10-18 07:31:39 +02:00
|
|
|
const router = useRouter()
|
|
|
|
return (
|
2019-11-11 04:24:53 +01:00
|
|
|
<div className="root">
|
2019-10-18 07:31:39 +02:00
|
|
|
<h2>Default</h2>
|
|
|
|
<p>
|
|
|
|
Automatically prefetch pages in the background as soon the Link appears
|
|
|
|
in the view:
|
|
|
|
</p>
|
2022-10-30 21:00:45 +01:00
|
|
|
<Link href="/" legacyBehavior>
|
2019-10-18 07:31:39 +02:00
|
|
|
<a>Home</a>
|
|
|
|
</Link>{' '}
|
2022-10-30 21:00:45 +01:00
|
|
|
<Link href="/features" legacyBehavior>
|
2019-10-18 07:31:39 +02:00
|
|
|
<a>Features</a>
|
|
|
|
</Link>
|
|
|
|
<h2>Imperative</h2>
|
|
|
|
<p>Prefetch on onMouseEnter or on other events:</p>
|
2022-10-30 21:00:45 +01:00
|
|
|
<Link prefetch={false} href="/about" legacyBehavior>
|
2019-10-18 07:31:39 +02:00
|
|
|
<a
|
|
|
|
onMouseEnter={() => {
|
|
|
|
router.prefetch('/about')
|
|
|
|
console.log('prefetching /about!')
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
About
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
<h2>Disable</h2>
|
|
|
|
<p>Disable prefetching</p>
|
2022-10-30 21:00:45 +01:00
|
|
|
<Link prefetch={false} href="/contact" legacyBehavior>
|
2019-10-18 07:31:39 +02:00
|
|
|
<a>Contact</a>
|
|
|
|
</Link>
|
|
|
|
<style jsx>{`
|
|
|
|
.root {
|
|
|
|
border-bottom: 1px solid grey;
|
|
|
|
padding-bottom: 8px;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
`}</style>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|