Menu avancé dans NextJS
Dans la leçon précédente, nous avons discuté du problème du menu avec des liens ordinaires. NextJS peut résoudre ce problème et faire en sorte que la navigation via un lien ne provoque pas le rechargement complet de la page. Pour optimiser les performances, seule la partie modifiée sera chargée via Ajax.
Pour cela, au lieu de liens, nous
utiliserons un composant spécial
Link.
Importons-le :
import Link from 'next/link';
Refaisons notre menu via ce composant :
export default function Menu() {
return <>
<Link href="/">home</Link>
<Link href="/about">about</Link>
<Link href="/price">price</Link>
<Link href="/contacts">contacts</Link>
</>;
}
Refaites votre menu via
le composant Link.
Assurez-vous que la navigation via les liens du menu ne provoque plus maintenant le rechargement de la page.
