Menú Avanzado en NextJS

En la lección anterior discutimos el problema del menú con enlaces comunes. NextJS puede resolver este problema y hacer que navegar por un enlace no recargue la página completa. Para optimizar el rendimiento, a través de Ajax se cargará solo la parte que ha cambiado.

Para esto, en lugar de enlaces utilizaremos un componente especial Link. Importémoslo:

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

Rehagamos nuestro menú mediante este 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>
  </>;
}
Задание 1

Rehaga su menú mediante el componente Link.

Задание 2

Asegúrese de que navegar por los enlaces del menú ya no recarga la página.