Разширено меню в NextJS

В предишния урок обсъдихме проблема на менюто от обикновени връзки. NextJS може да реши този проблем и да направи така, че преходът по връзка да не води до презареждане на цялата страница. За оптимизация на производителността чрез Ajax ще се зарежда само променената част.

За това вместо връзки ние ще използваме специален компонент Link. Импортираме го:

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

Нека преработим нашето меню чрез този компонент:

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