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:

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

Låt oss omarbeta vår meny med hjälp av denna komponent:

/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>
  </>;
}