NextJS да ишчи тартибдаги кўшимча меню

Олдинги дарсда биз оддий ҳаволалардан иборат менюнинг муаммосини муҳокама қилдик. NextJS бу муаммони ҳал қилиши ва саҳифанинг тўлиқ қайта юкланмаслиги учун ҳавола ўтиш имкониятини яратиши мумкин. Самарадорликни оптимизациялаш учун фақат ўзгарган қисм Ajax орқали юкланadi.

Бунинг учун ҳаволалар ўрнига биз махсус 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 компонентаси орқали қайта қуринг.

Меню ҳаволалари бўйича ўтиш энди саҳифанинг қайта юкланмаслигига ишонч ҳосил қилинг.