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:
import Link from 'next/link';
Laten we ons menu herschrijven met deze component:
export default function Menu() {
return <>
<Link href="/">home</Link>
<Link href="/about">about</Link>
<Link href="/price">price</Link>
<Link href="/contacts">contacts</Link>
</>;
}
Herschrijf je menu met behulp van
de component Link.
Controleer of het navigeren via de menu-links nu niet langer leidt tot het herladen van de pagina.
