Edistynyt valikko NextJS:ssä

Edellisessä oppitunnissa keskustelimme ongelmasta tavallisten linkkien valikossa. NextJS voi ratkaista tämän ongelman ja varmistaa, että linkin seuraaminen ei aiheuta koko sivun uudelleenlatausta. Suorituskyvyn optimoimiseksi vain muuttunut osa ladataan Ajaxin kautta.

Tätä varten käytämme linkkien sijaan erikoista komponenttia Link. Tuodaan se:

/src/comps/menu/menu.jsximport Link from 'next/link';

Muutetaan valikkomme tämän komponentin avulla:

/src/comps/menu/menu.jsxexport default function Menu() {
  return <>
    <Link href="/">koti</Link>
    <Link href="/about">tietoa</Link>
    <Link href="/price">hinta</Link>
    <Link href="/contacts">yhteystiedot</Link>
  </>;
}