import Router from 'next/router'
import Link from 'next/link'

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>
)