Geavanceerd menu in NextJS

In de vorige les bespraken we het probleem van een menu met gewone links. NextJS kan dit probleem oplossen en ervoor zorgen dat het navigeren via een link niet leidt tot het volledig herladen van de pagina. Voor geoptimaliseerde prestaties wordt alleen het gewijzigde deel via Ajax geladen.

Hiervoor gebruiken we, in plaats van links, een speciale component Link. Laten we deze importeren:

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

Laten we ons menu herschrijven met deze component:

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