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:

/src/comps/menu/menu.jsximport Link from 'next/link';

Menümüzü bu bileşen aracılığıyla yeniden düzenleyelim:

/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>
  </>;
}