Edistynyt valikko NextJS:ssä
Edellisessä oppitunnissa keskustelimme ongelmasta tavallisten linkkien valikossa. NextJS voi ratkaista tämän ongelman ja varmistaa, että linkin seuraaminen ei aiheuta koko sivun uudelleenlatausta. Suorituskyvyn optimoimiseksi vain muuttunut osa ladataan Ajaxin kautta.
Tätä varten käytämme linkkien sijaan
erikoista
komponenttia Link.
Tuodaan se:
import Link from 'next/link';
Muutetaan valikkomme tämän komponentin avulla:
export default function Menu() {
return <>
<Link href="/">koti</Link>
<Link href="/about">tietoa</Link>
<Link href="/price">hinta</Link>
<Link href="/contacts">yhteystiedot</Link>
</>;
}
Muuta valikkosi
Link-komponentin avulla.
Varmista, että valikon linkkien seuraaminen ei enää aiheuta sivun uudelleenlatausta.
