Erweitertes Menü in NextJS

In der vorherigen Lektion haben wir das Problem eines Menüs aus gewöhnlichen Links besprochen. NextJS kann dieses Problem lösen und sicherstellen, dass das Navigieren über einen Link nicht zum Neuladen der gesamten Seite führt. Zur Optimierung der Leistung wird über Ajax nur der geänderte Teil nachgeladen.

Dafür werden wir anstelle von Links eine spezielle Komponente Link verwenden. Importieren wir sie:

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

Lassen Sie uns unser Menü mit dieser Komponente umbauen:

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