Haladó menü NextJS-ben

Az előző leckében megvitattuk a közönséges hivatkozásokból álló menü problémáját. A NextJS megoldja ezt a problémát és biztosítja, hogy a hivatkozásra kattintás ne eredményezze a teljes oldal újratöltését. A teljesítmény optimalizálása érdekében csak a megváltozott rész töltődik be Ajax-on keresztül.

Ehhez a hivatkozások helyett egy speciális Link komponenst fogunk használni. Importáljuk:

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

Alakítsuk át a menünket ezen komponens segítségével:

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