Täiustatud menüü NextJS-s

Eelmises õppetükis arutasime tavalihtidega menüü probleemi. NextJS saab selle probleemi lahendada ja teha nii, et lingile klikkimine ei põhjusta kogu lehe uuesti laadimist. Jõudluse optimeerimiseks laaditakse vaid muutunud osa läbi Ajax-i.

Selleks kasutame linkide asemel spetsiaalset komponenti Link. Impordime selle:

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

Muudame oma menüü ümber selle komponendi abil:

/src/comps/menu/menu.jsxexport default function Menu() {
  return <>
    <Link href="/">kodu</Link>
    <Link href="/about">meist</Link>
    <Link href="/price">hinnad</Link>
    <Link href="/contacts">kontaktid</Link>
  </>;
}