Menu Avanzato in NextJS

Nella lezione precedente abbiamo discusso il problema del menu composto da link normali. NextJS può risolvere questo problema e fare in modo che la navigazione tramite un link non causi il ricaricamento completo della pagina. Per ottimizzare le prestazioni, verrà caricata tramite Ajax solo la parte che è cambiata.

Per fare ciò, invece dei link, utilizzeremo uno speciale componente Link. Importiamolo:

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

Ristrutturiamo il nostro menu utilizzando questo componente:

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