NextJS'te Gelişmiş Menü
Önceki derste, normal bağlantılardan oluşan menü sorununu tartıştık. NextJS bu sorunu çözebilir ve bir bağlantıya tıklamanın sayfanın tamamının yeniden yüklenmesine yol açmamasını sağlayabilir. Performansı optimize etmek için değişen kısım yalnızca Ajax aracılığıyla yüklenecektir.
Bunun için bağlantılar yerine
özel bir Link bileşeni
kullanacağız.
Onu içe aktaralım:
import Link from 'next/link';
Menümüzü bu bileşen aracılığıyla yeniden düzenleyelim:
export default function Menu() {
return <>
<Link href="/">home</Link>
<Link href="/about">about</Link>
<Link href="/price">price</Link>
<Link href="/contacts">contacts</Link>
</>;
}
Menünüzü Link bileşeni
aracılığıyla yeniden düzenleyin.
Menü bağlantılarına tıklandığında artık sayfanın yeniden yüklenmediğinden emin olun.
