Avanceret menu i NextJS
I den forrige lektion diskuterede vi problemet med en menu af almindelige links. NextJS kan løse dette problem og sikre, at et linkklik ikke medfører en genindlæsning af hele siden. For at optimere ydelsen vil kun den ændrede del blive indlæst via Ajax.
For at gøre dette vil vi
i stedet for links
bruge en speciel
komponent kaldet Link.
Lad os importere den:
import Link from 'next/link';
Lad os ombygge vores menu ved hjælp af denne komponent:
export default function Menu() {
return <>
<Link href="/">hjem</Link>
<Link href="/about">om</Link>
<Link href="/price">priser</Link>
<Link href="/contacts">kontakter</Link>
</>;
}
Ombygg din menu ved hjælp af
komponenten Link.
Sikr dig, at klik på links i menuen nu ikke medfører genindlæsning af siden.
