Avancerad meny i NextJS
I föregående lektion diskuterade vi problemet med en meny av vanliga länkar. NextJS kan lösa detta problem och se till att navigering via en länk inte leder till en omladdning av hela sidan. För optimerad prestanda kommer endast den ändrade delen att laddas via Ajax.
För att göra detta kommer vi istället för länkar
att använda en speciell
komponent Link.
Importera den:
import Link from 'next/link';
Låt oss omarbeta vår meny med hjälp av denna komponent:
export default function Menu() {
return <>
<Link href="/">home</Link>
<Link href="/about">about</Link>
<Link href="/price">price</Link>
<Link href="/contacts">contacts</Link>
</>;
}
Omvandla din meny med hjälp av
komponenten Link.
Se till att navigering via länkarna i menyn nu inte leder till en omladdning av sidan.
