Разширено меню в 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.

Уверете се, че преходът по връзките на менюто вече не води до презареждане на страницата.