Продвинутое меню в 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>
  </>;
}