Zaawansowane menu w NextJS

W poprzedniej lekcji omówiliśmy problem menu ze zwykłymi linkami. NextJS może rozwiązać ten problem i sprawić, że przejście przez link nie prowadzi do przeładowania strony w całości. Dla optymalizacji wydajności przez Ajax będzie ładowana tylko zmieniona część.

Dlatego zamiast linków będziemy używać specjalnego komponentu Link. Zaimportujmy go:

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

Przeróbmy nasze menu przez ten 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>
  </>;
}