Продвинутое меню в NextJS

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

Для этого вместо ссылок мы будем использовать специальный компонент Link. Импортируем его:

import Link from 'next/link';

Переделаем наше меню через этот компонент:

export default function Menu() {
	return <>
		<Link href="/">home</Link>
		<Link href="/about">about</Link>
		<Link href="/price">price</Link>
		<Link href="/contacts">contacts</Link>
	</>;
}

Переделайте ваше меню через компонент Link.

Убедитесь, что переход по ссылкам меню теперь не приводит к перезагрузке страницы.